Jump to content
Please Use CODE Tags

Really noob question about HTML/CSS

Red Saum
By Red Saum
in Programming
 Share
Posted

How do I get a link to display vertically, rather than horizontally, against an element? I'm making a really random site to practice, but I can't figure this out. 

 

My code so far: 

 

HTML 

<!DOCTYPE html>
<html>
  <head>
    <title>Ashton | Tater</title>
    <h1>Ashton | Likes Tacos</h1>
    <link rel="stylesheet" href="main.css">
    </head>
  <body>
    <div>
      <img src="http://www.tacobueno.com/media/1382/bftlarge.png?quality=65" alt="taco"/>
      <h2>Tacos are cool</h2>
    </div>
    <a href="http://google.com">Google</a>
  </body>
</html>

 

CSS 

div {
  background-color: orange;
  display: inline-block;
}

 

I'd appreciate the help. 

Link to comment
https://linustechtips.com/topic/706846-really-noob-question-about-htmlcss/
Share on other sites
Link to post
Share on other sites
Posted

Why would you want something to be vertical is my question? 

|Casual Rig| CPU: i5-6600k |MoBo: ROG Gene  |GPU: Asus 670 Direct CU2 |RAM: RipJaws 2400MHz 2x8GB DDR4 |Heatsink: H100i |Boot Drive: Samsung Evo SSD 240GB|Chassis:BitFenix Prodigy |Peripherals| Keyboard:DasKeyboard, Cherry MX Blue Switches,|Mouse: Corsair M40

|Server Specs| CPU: i7-3770k [OC'd @ 4.1GHz] |MoBo: Sabertooth Z77 |RAM: Corsair Vengeance 1600MHz 2x8GB |Boot Drive: Samsung 840 SSD 128GB|Storage Drive: 4 WD 3TB Red Drives Raid 5 |Chassis:Corsair 600t 

Link to post
Share on other sites
Posted

Two options

1)  

width: 1px;
word-wrap: break-word;

2)  

writing-mode: tb-rl;

 

HAL9000: AMD Ryzen 9 3900x | Noctua NH-D15 chromax.black | 32 GB Corsair Vengeance LPX DDR4 3200 MHz | Asus X570 Prime Pro | ASUS TUF 3080 Ti | 1 TB Samsung 970 Evo Plus + 1 TB Crucial MX500 + 6 TB WD RED | Corsair HX1000 | be quiet Pure Base 500DX | LG 34UM95 34" 3440x1440

Hydrogen server: Intel i3-10100 | Cryorig M9i | 64 GB Crucial Ballistix 3200MHz DDR4 | Gigabyte B560M-DS3H | 33 TB of storage | Fractal Design Define R5 | unRAID 6.9.2

Carbon server: Fujitsu PRIMERGY RX100 S7p | Xeon E3-1230 v2 | 16 GB DDR3 ECC | 60 GB Corsair SSD & 250 GB Samsung 850 Pro | Intel i340-T4 | ESXi 6.5.1

Big Mac cluster: 2x Raspberry Pi 2 Model B | 1x Raspberry Pi 3 Model B | 2x Raspberry Pi 3 Model B+

Link to post
Share on other sites
Posted

Add to the div or h2 in the CSS file: 

writing-mode: vertical-lr;

or 

writing-mode: vertical-rl;

to make the text vertical, but with its letters in a horizontal position.

 

But I think you'll find this one more useful. 

h2 {
width: 10px;
word-wrap: break-word;
float: left;
}

You set the width to a letter's length as @jj9987 said and set the float to left so it doesn't go under the taco image. It puts the letters as well as the text in a vertical position. You'd regret to change the div in this case.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×