Place element adjacent to another that is not within the same div-element

StackOverflow https://stackoverflow.com/questions/23540251

  •  18-07-2023
  •  | 
  •  

Question

Background
I'm a real green-bean when it comes to CSS (as in I started like a week ago) and have been assigned with the task of constructing our company's homepage. A heads up: I have 0 experience in web development, and when I say 0, I mean that one week ago I thought that CSS was the design world's terminology for object oriented programming and not that it was something you actually write and code in. But it's all fun to learn new things through SO/WC3/Google but I have run into an issue I can't get a grip on.

Issue
We're using Joomla as a development kit and specifically the Beez_20 template. As a reference for the issue I'm having I have uploaded a picture here. The parentheses show which css file it is located in. I want to put the banner (div.logoheader) adjacent to and below the menu (ul.menu) and avoid the white space in between them (which is the background of div.header). I've seen several posts about how to use position:relative and position:absolute but I can't get that to work when I have the css code in separate css files.

Trial and error
What I've done so far is to make the following changes:

  • Removed the max-width so that the menus and backgrounds stretch over the entire page
  • Put the div#line position:absolute; so that it is always on the top of the page
  • Put the ul.menu position:relative, and top:35px left:-10px to put it exactly below the div#line (why this isn't 0 0 I have no idea but it works this way)
  • Put the div.logoheader position:relative;

I've tried switching between relative and absolute but I can't seem to get it working. I always end up with a white space between the logoheader and the ul.menu. The tips I've seen is to use both relative and absolute but I don't know how to work that out when the images and elements are located in different css-files.

Other
I've noticed that the ul.menu disappears if I change the div#line position from absolute to relative. The div#line then ends up at the bottom of div.logoheader. If I comment out the section in personal.css and position.css the other elements still remain in the same positions.

I'm thinking that this is not something you solve in CSS but you should go into the PHP file but that is just me stabbing in the dark. Grateful for any help I can get on this issue, and let me know if there is additional information that is required.

EDIT: Fixed link

Was it helpful?

Solution

Try keeping the relative position for the div.logoheader and also adding bottom: 35px;. This should push it up. It's not the best method, however without seeing a live preview of the template, it's rather hard to give a more accurate answer. So your final code should look like this:

div.logoheader {
    position: relative;
    bottom: 35px;
}

You may need to change the value 35 according to the spacing. Hope this helps

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top