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
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 comment
Share on other sites
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 comment
Share on other sites
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 comment
Share on other sites
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

×