CSS/HTML - Help with div positioning, follow up question.

[Travercraig]

Ok  so, basically here is the other question I posted. However I've been doing a bit of tinkering and have managed to get this far. The only issue is that using top:0; to move elements onto the teamspeak_box seems to hide the link. When i remove the top:0; the link returns to the whole rectangle but the text is floating underneath. I think I've probably done some awkward positioning since I just trial-and error stuff until it works. Here is a fiddle of what I have currently. I think I've positioned each element wrong to be honest, but I tried lol. I don't even know the if HTML is structured correctly either for these grey boxes. I'm trying to get them looking like this (but more centred and accurate) with the team speak link working on the entire team speak rectangle. The header-wrapper puts the two grey rectangles in the right position 90% of the total width, but the elements within the grey boxes are a bit of a mess. I'm sorry for bothering you again but you're probably the most helpful I've encountered so far. Also if it helps I'll post the code of just the header below:

<header>          <img id="logo" src="images/CRAFT412 - Logo.png" alt="LOGO"><div id="header-wrapper">                                                                        <div id="ip_box">                         <span id="ip_text">SERVER IP                           craft412.serveminecraft.net</span>                     </div>          <div id="teamspeak_box">                                <a href="ts3server://craft412.serveminecraft.net:9987"></a>                                <span id="teamspeak_box_2"></span>                                <span id="teamspeak_text">TEAMSPEAK</span>                                <img  id="teamspeak_image" src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK ICON"/>                            </div></div>                                                </header>

#header-wrapper {width:90%;                 margin:auto;                 position:relative;}header {height: 150px;        background-image:url('../images/SiteBackground.png');        border-bottom: 5px solid #C62828;        position:relative;}#logo {position: absolute;       top: 50%;       left: 50%;       transform: translate(-50%, -50%);}#ip_box {width: 210px;         height: 45px;         background: #212121;                             	     display:inline-block;}#ip_text {color: white;          font-family: 'Roboto', sans-serif;}#teamspeak_box {width: 159px;                height: 45px;                background: #212121;                                             float:right;                transition:all 0.5s ease;                display:inline-block;                position:relative;}#teamspeak_box:hover {border-bottom: 3px solid #C62828;                      background: #313131;                      transition: all 0.5s ease;}#teamspeak_box a {display:block;                  height: 45px;}#teamspeak_box_2 {display:inline-block;                  position:absolute;                                 width: 45px;                  height: 45px;                  background:#313131;                  top:0;}#teamspeak_image {position: absolute;                  top: 50%;                  transform: translateY(-50%);                  left:2px;}#teamspeak_text {color: white;                 text-align:45px;                 font-family: 'Roboto', sans-serif;                 position:absolute;                 line-height: 45px;                 right:13px;                 top:0;}

[Ciccioo]

the elements within the grey boxes are a bit of a mess

Can you elaborate on that?

 

You probably want to use either floating or table layout for positioning elements in the teamspeak box. And applying some padding will probabyl make things less clustered.

"text-align:45px" is not valid CSS.

 

but then i'm very bad at design, i don't know what to do, what result are you aiming for exactly?

[Travercraig]

Can you elaborate on that?

 

You probably want to use either floating or table layout for positioning elements in the teamspeak box. And applying some padding will probabyl make things less clustered.

"text-align:45px" is not valid CSS.

 

but then i'm very bad at design, i don't know what to do, what result are you aiming for exactly?

The link of what I want it to look like is provided in the question. And what I mean about the mess part is that the elements within the grey box divs are not where they should be and it's probably not coded correctly in the proper way. Could you show me what you mean by table layout I have no idea what that is. A fiddle would be very useful. 

[Ciccioo]

The link of what I want it to look like is provided in the question. And what I mean about the mess part is that the elements within the grey box divs are not where they should be and it's probably not coded correctly in the proper way. Could you show me what you mean by table layout I have no idea what that is. A fiddle would be very useful. 

how about this?

i don't know what you mean by "the boxes aren't where they should be", now that i fixed the sizes and alignments it looks fine to me, i can't see the teamspeak logo because it's lacking the image but it should be fine if you use a square image (maybe 45x45 already).

 

yes it's not coded the right way at all, as i said it would be much preferred to use floats, but the result in the link above is achieved by just editing 3 or 4 lines of css, so that's quick for sure

 

edit: added random image to see if it fits

[colonel_mortis]

Your link has no content in it, so there's nothing to click. You want to wrap all of the contents of the #teamspeak_box with the link, like this

            <img id="logo" src="images/CRAFT412 - Logo.png" alt="LOGO">            <div id="header-wrapper">                <div id="ip_box"> <span id="ip_text">SERVER IP                           craft412.serveminecraft.net</span>                </div>                <div id="teamspeak_box">                    <a href="ts3server://craft412.serveminecraft.net:9987">                         <span id="teamspeak_box_2"></span>                         <span id="teamspeak_text">TEAMSPEAK</span>                         <img id="teamspeak_image" src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK ICON" />                    </a>                </div>            </div>

[Travercraig]

 

Your link has no content in it, so there's nothing to click. You want to wrap all of the contents of the #teamspeak_box with the link, like this

            <img id="logo" src="images/CRAFT412 - Logo.png" alt="LOGO">            <div id="header-wrapper">                <div id="ip_box"> <span id="ip_text">SERVER IP                           craft412.serveminecraft.net</span>                </div>                <div id="teamspeak_box">                    <a href="ts3server://craft412.serveminecraft.net:9987">                         <span id="teamspeak_box_2"></span>                         <span id="teamspeak_text">TEAMSPEAK</span>                         <img id="teamspeak_image" src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK ICON" />                    </a>                </div>            </div>

Oh wow such a simple solution. Thanks a lot, I'm new to html and css so I don't see these obvious things.

[Travercraig]

how about this?

i don't know what you mean by "the boxes aren't where they should be", now that i fixed the sizes and alignments it looks fine to me, i can't see the teamspeak logo because it's lacking the image but it should be fine if you use a square image (maybe 45x45 already).

 

yes it's not coded the right way at all, as i said it would be much preferred to use floats, but the result in the link above is achieved by just editing 3 or 4 lines of css, so that's quick for sure

 

edit: added random image to see if it fits

That seems to work fine, I know I butcher code to a horrendous standard, but i just play around until it works. If you have the time would you be able to show me the proper way or would you say this is fine? I'd like to learn the correct way of doing things. Up to you though, you've certainly answered the question. I might make a start on looking at table layouts as you suggested. 

[Ciccioo]

That seems to work fine, I know I butcher code to a horrendous standard, but i just play around until it works. If you have the time would you be able to show me the proper way or would you say this is fine? I'd like to learn the correct way of doing things. Up to you though, you've certainly answered the question. I might make a start on looking at table layouts as you suggested. 

i don't really enjoy markup and design so i'll skip on this, but here is a link that might be helpful, and in general you want to research something about css floats or css table layout

 

edit: as colonel mortis noticed, it's also very important to get the markup done right, it helps you both practically and conceptually, looking for the solution

[colonel_mortis]

Using tables for layouts is generally frowned upon these days - it's preferred instead that you use flex boxes if you're not interested in supporting older versions of IE (IE 11 is the only supported IE version according to caniuse), or making use of floating and generally CSS to make it work. The way you're doing it is that last way, so it should be fine.

 

What exactly isn't working with your current version that you would like to be fixed?

[Travercraig]

Using tables for layouts is generally frowned upon these days - it's preferred instead that you use flex boxes if you're not interested in supporting older versions of IE (IE 11 is the only supported IE version according to caniuse), or making use of floating and generally CSS to make it work. The way you're doing it is that last way, so it should be fine.

 

What exactly isn't working with your current version that you would like to be fixed?

Oh it's not broken or anything I was just wondering if this way of doing it was fine. Me being new I have no idea what's acceptable and what's not. But you said it's alight in your last post right, so I guess I'm ok. To be honest a lot of this I just guessed.