Jump to content

Honest989

Members
 View Profile  See their activity

  • Posts

    4

  • Joined

  • Last visited

Honest989's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Honest989
    Hi all, Bit of an 'interesting' problem. I'm trying to do a really simple layout template in html/css. (it's simple as it's destined for a confluence page so the less fancy the better) The layout is relatively simple - The aim was to have three menu containers side by side. The third and final box of the three was to have rotated menu buttons. I face two problems with what my code produces. #1 In the third yellow box you will see that I have two rotated divs. The space between them is massive and the container for them behaves... oddly - it expands massively.. What I wanted was for the container to scale in size with the content as there should be five menu buttons in there, not just two. And they should be spaced out with really only 2-5 px between them. #2 I can't seem to get the containers to centre vertically within the parent container. (feel free to ignore the title bar. I was going to scale that across later when finished) Can someone assist me here? <!DOCTYPE html> <html> <head> <style> .screencontainer{ margin: 0 auto; display: block; xxheight: auto; xxmax-width: 90%; align-items: middle; } .foundations-wrapper{ display: inline-block; background-color: yellow; padding: 10px; xxheight: auto; margin: auto; } .foundations-content{ display: block; width:200px; height:50px; background-color: lightblue; margin: auto; margin-top: 10px; text-align: center; color: white; } .foundations-button{ display: inline-block; width:20px; height:20px; background-color: blue; margin: auto; margin: 10px; text-align: center; color: white; } .search-wrapper{ display: inline-block; background-color: yellow; padding: 10px; xxheight: auto; margin: auto; } .search-content{ display: inline-block; height:50px; width:200px; background-color: lightblue; margin: 0 auto; text-align: center; color: white; -ms-transform: rotate(90deg); transform: rotate(90deg); } .titlebar{ display: block; width:404px; height:20px; border-radius:10px; background-color: red; text-align: center; color: white; } </style> </head> <body> <div class="screencontainer" style="border: 1px solid black;"> <div class="titlebar">1</div> <div class="foundations-wrapper"> <div class="foundations-content">1</div> <div class="foundations-content">1</div> <div class="foundations-content">1</div> <div class="foundations-content">1</div> <div class="foundations-content">1</div> <div class="foundations-content">1</div> <div class="foundations-content">1</div> </div> <div class="foundations-wrapper"> <div class="foundations-content"> <div class="foundations-button">1</div> <div class="foundations-button">1</div> <div class="foundations-button">1</div> </div> <div class="foundations-content"> <div class="foundations-button">1</div> <div class="foundations-button">1</div> <div class="foundations-button">1</div> </div> <div class="foundations-content"> <div class="foundations-button">1</div> <div class="foundations-button">1</div> <div class="foundations-button">1</div> </div> </div> <div class="search-wrapper"> <div class="search-content">1</div> <div class="search-content">1</div> </div> </div> </body> </html>
  2. Honest989
    The text wrapping is fine - I I just want this text to be centered in the block (i.e in the middle)
  3. Honest989
    Thank you for the help. It's cleared up a few things but I'm left with the problem of the text. I can center it as described but using line height has this weird effect on wrapped text. That what should look like Text, text & text (which would be on two lines) Becomes Text, text &Text. It also disturbs the flow of the boxes and pushes them down in line with the lowest part of the text. What's happening here? Is my CSS and margins doing something odd?
  4. Honest989
    Hi All, I'm trying to relearn everything I knew about HTML again and I'm picking it up but slowly. I have created a table and all is fine with that. Placed on top of this table, I wanted to have several blocks of different sizes. They weren't meant to line up with the table as they illustrate different steps of a process as you go along the table from left to right. (One block could cover a column and then part of another one). As a result, I thought a block container with several in-line blocks internally would be appropriate to use. Most of my issues are around my efforts to center the text in the middle of the inline block - you'll notice that where text breaks to a second line there's this weird behaviour as well. I can't use padding to center the cell (I believe) as it increases the size beyond what I want. Below is an example of the code being used. Can someone advise me of the best method to center the text in the inline blocks and resolve the blocks moving out of position as a result? <!DOCTYPE html> <html> <head> <style> div.container { align: center; width: 500px; margin: 0 auto; position: relative; border: 1px solid black; Display: block; } div.itilblock { background-color: rgb(3,173,181); border-style: outset; text-align: center; color: white; height: 75px; padding: 3px; position: relative; display: inline-block; } </style> </head> <body> <div class ="container"> <div class ="itilblock" style= "width: 150px; align-items: center; line-height: 50px;">something and something else</div> <div class ="itilblock" style= "width: 200px; align-items: center; line-height: 30px; left: 20px;">something and something else</div> </div> </body> </html>
×
×
  • Create New...