I suck at CSS and need some help.

[Cruorzy]

I need some good resources from the guys that actually can do positioning in CSS without having to suffer brain damage while doing it.

My content keeps breaking and I can hack and copy and paste what I want and sometimes it works! but i need to get it under control because web design is a very important thing.

 

Im working on a idea right now where it would be nice to nest everything inside a UL since the jQuery code would be better in the end.

I cant really show you what i want right now since im not home and I will post the idea with my paint skills once im home. (so later today)

 

I'll try to show some code and explain but i prefer to post a screenshot later so im sure you guys know what i mean

Im not using a Framework its all own code since I suck at this i thought it would be nice to practice.

 

<div class="menu-wrapper">
  <ul>
    
    <span>Menu</span> <!--Menu heading -->
    
    <li>Home <!--First menu link-->
      <div class="menu-link-info">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo
      </div>
    </li>

    <li>About <!--Second menu link-->
      <div class="menu-link-info">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo
      </div>
    </li>

    <li>Contact <!--Third menu link-->
      <div class="menu-link-info">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo
      </div>
    </li>
    
  </ul>
</div>

The thing is that the menu-link-info ofcourse get wrapped under their parent menu link.

But what i want to do is that the nested div menu-link-info will get next to it like its his own div.

 

w3schools has kind of such example https://www.w3schools.com/colors/default.asp

 

The NAV left of the page once you click it other content will be displayed, that content will in my case be the div inside the li link.

 

 

I know this is very unclear so far, and i will post an awesome paint drawing once i have time.

Any videos for just understanding like positioning and display etc etc would be very helpful! I watch much already and read about it but I just dont get it so far.

[P4ZD4]

Something like this? 

 

 

[Cruorzy]

Yeah exactly i got so far as you, but the problem is not when the menu-link-info has to much information it will overlap the menu-wrapper because its position absolute.

 

.menu-wrapper{
  border: solid 1px blue;
}

The thing is the menu-wrapper his height should be based on the biggest thing, if its the menu links then that or if one of the menu's has ALOT of text in it it should already be this high.

So it does not do any weird stuff with resizing once you click on it.

[Sental]

have you tried using any of the overflow controls? If these aren't going to help then you need to look at the sizes of your divs and the wording of the menus.

 

div {
    overflow: hidden;
}

 

The following are overflows properties:

• visible - Default. The overflow is not clipped. It renders outside the element's box
• hidden - The overflow is clipped, and the rest of the content will be invisible
• scroll - The overflow is clipped, but a scrollbar is added to see the rest of the content
• auto - If overflow is clipped, a scrollbar should be added to see the rest of the content

EDIT: scratch that, just reread the post. Tried manually setting the height of the div in the css?

[Cruorzy]

This is where i got stuck now.

 

 

Im trying to get the text in the box next to it but the wrapper box must also react on the content.

 

The menu list and the content must be in the length the same always.

[Cruorzy]

Nevermind i decided to do it the weak way and change it maybe in the future once im able to pull it off.

 

Ides not is still to have nested stuff but hide them

Then create a emty div with styling and once you click on the menu link with the nested stuff inside it, it will copy the content from that div to the empty div which is positioned the right way.

 

Still some directions in how to get better at this will be very welcome!

[Mira Yurizaki]

4 hours ago, Cruorzy said:

The NAV left of the page once you click it other content will be displayed, that content will in my case be the div inside the li link.

So instead of loading a new page, you want the main container to display the <div> in the <li>?

 

Your content should be living in the main container, not with <li>. You would then wrap the <li> text with a <span> or make a button (with some styling) to have something to anchor a JavaScript operation in order to change the display of the content you want to show or hide.

 

You could also do pure CSS tabs like http://code.stephenmorley.org/html-and-css/tabbed-panels/, but you'd have to mangle it to get the tabs vertically stacked rather than horizontal.

[vorticalbox]

So you want links down the left and the content to wrap under the links? Or stay over to the left?

 

edit:

somthing like this? https://jsfiddle.net/f3L06j2m/

[Cruorzy]

@vorticalbox im looking for something like this 

 

The <p> content is display next to the menu but is still nested into a <li>. Im aware this is a weird way of doing it but it would be perfect with a repeater i got from wordpress and have great simpeler jQuery code.

 

Edit: 

The problem is now that the p container is absolute and isnt wrapped into the menu-wrapper.

[vorticalbox]

can't you just have two div inside another (like mine) flost one left and one right? Would give the same effect.

[Cruorzy]

The repeater will not work properly with that, I know it works but the idea was to make it as efficient as possible for the stupid plugin