I would like to create a simple HTML page that looks as follows:
Here is how I wrote my HTML code for the green band, I will not discuss the content of the body (the left, middle, right part) here:
h1 {
color: white;
font-size: 30px;
}
.band-header {
text-align: left;
background-color: #1abc9c;
}
<div class="band-header">
<header class="site-header">
<h1>Sample Web Application</h1>
<img src="image.png" align="right">
</header>
</div>
Here are my questions:
1. I know that there are many mistakes in my code, the first thing that I didn't get is the green-coloured header background never appeared. Even if I changed the CSS to .site-header, it still didn't appear.
2. How could I make the text **"Sample Web Application"** to the bottom left of the green band? It always appeared on the top left. Is there a bottom-left alignment?
3. How could I make the image on the top right of the green band? I tried align right but it is never positioned to the top left. Is there a way to position it on the right and on the top?
I know it's a lot of questions and I am just a newbie at HTML and CSS. Could anyone please give some lights? I really appreciate it. Many thanks.
The green color appears in your code, but the header does not have a specified height. It is therefore as high as its highest child element. Below I made the header 100px high which allows for bottom and top alignment of the child elements.
2 + 3: The container (header) is defined as a flexbox. This allows for alignment options of its child elements (items).
.band-header>header {
height: 100px;
background-color: #1abc9c;
display: flex;
justify-content: space-between;
}
.band-header>header h1 {
color: white;
font-size: 30px;
margin: 0;
align-self: flex-end; /* put it at the bottom */
}
.band-header>header img {
align-self: flex-start; /* put it at the top */
}
<div class="band-header">
<header class="site-header">
<h1>Sample Web Application</h1>
<img src="https://via.placeholder.com/50x50">
</header>
</div>
Related
I have created a wrapper div (ctccon) within which I have two divs both floating left so that they are positioned next to each other. This works fine until I add an image or table inside the right div (conright) and then the added element gets pushed below the left div (conleft).
My css
.ctccon {
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
overflow: hidden;
}
.ctccon .conleft {
float:left;
width:40%;
font-size:0.7em;
}
.ctccon .conright {
float:left;
font-size:1em;
}
And my html (without added elements)
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div </div>
</div>
and with added elements
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div <img src="pic1.jpg"> </div>
</div>
I know it's probably something I haven't understood re floats but I have not found a solution. Any pointers?
-----update-------
I have since removed the image and added a table inside conright. Still getting the same issue as per the image below:
It will be better if you share an image of your error but:
I recreated your code with an image, and with a table, and it doesn't get push to the bottom of the other div.
But let me explain what might be happening to you:
1: You have 2 div that are pushed left, if one of them gets to have an space, it will put itself below your other div, why? because is pushed left!, if it is pushed left and there is nothing next to it. It will take that space and do what is intended to, float left.
2: If you want your div to stay to the right, put in your css code float RIGHT, and it will be in the right ignoring your left div (as long as it doesnot take the whole screen).
3: If your image takes more that the 60% left of the space the other div has available, it will get push to the button to be able to fit the image.
To solve your issue I think you can add this to your code in your conright div:
.ctccon .conright {
float:left;
font-size:1em;
width: 60%;
}
Why do you have to this this?, because if you dont specify the width of this div, and its content takes more space that 60%, it will get push to the bottom
Please if this doesn't answer your question provide a picture of your error.
that depends on the size of the image:
If the image plus the text become wider than the space left by the first div, it will go below the first div.
But you can add a width to the second div to avoid that - any width up to 60% should work.
Addition / snippet:
.ctccon {
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
overflow: hidden;
}
.ctccon .conleft {
float: left;
width: 40%;
font-size: 0.7em;
}
.ctccon .conright {
width: 60%;
float: left;
font-size: 1em;
}
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div <img src="http://placehold.it/400x300"> </div>
</div>
After trying to make the floats work, I just ended up using grids instead and modified the CSS code as follows:
.ctccon {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 20px;
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
}
.conleft {
font-size:0.7em;
}
.conright {
font-size:1em;
}
Now I get the layout I intended to get:
The added benefit to doing it this way, I suppose, will be making it easier to make the website responsive. I am using scss and breakpoints so I'd just need to change the css slightly for each breakpoint.
I have been trying to make a row of responsive boxes present a nicer look. After lots of effort and googling, I am here to get a word from experts. Please check the image below:
Outermost red is a bootstrap flexible row with display:flex;
Each box, the first of which is represented by green box, has flex: 1 ...;
Until this point, there is no issue and my CSS works perfect on all screen sizes showing all the boxes in same height and width. I just have two issues which I need help on.
Issue 1:
I need that lower part of box (represented by orange border) may always get positioned to the bottom of green box. This way all the buttons will appear in same line.
I tried to use a wrapper div in each box and then set position attribute for wrapper to relative and those of inner divs (yellow & orange) to absolute. Then I set the lower one to bottom: 0px;. But it does not work with flex and needs me to mention fixed height of wrapper which I cannot mention.
Issue 2:
In the box with the blue border I need the text of all lines to be justified except the last line which should be left aligned.
Issue 1
Assign display: flex to the div that is presented by the green box. After that, add align-self: flex-end; to the orange box. The orange box should now be displayed at the end of the green box.
Issue 2
Use the following fix to achieve what you want:
.blue-box {
text-align: justify;
-moz-text-align-last: right;
text-align-last: left;
}
The problem is that this wis not supported by Safari on Mac and iOS devices. You would have to add more markup to also cover Safari. An example would be to wrap each text line into a p tag if it's possible. Then you could do this:
.blue-box p {
text-align: justify;
}
.blue-box p:last-child {
text-align: left;
}
Please report back if the fixes do work for you or not.
The best way to solve this is to use flexbox.
.promo-boxes {
width: 100%;
display: flex;
justify-content: space-between;
background-color:black;
}
.promo-box {
width: 100px;
border: solid 1px #ccc;
background-color:red;
display: flex;
}
.btns-wrapper {
margin-top: auto;
align-self: flex-end;
}
<div class="promo-boxes">
<div class="promo-box">
<div>test 2</div>
<div class="btns-wrapper">
<button>
subscribe
</button>
</div>
</div>
<div class="promo-box">
<div>
test 3
</div>
<div class="btns-wrapper">
</div>
</div>
<div class="promo-box">
<div>
test 4 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
loooong
</div>
<div class="btns-wrapper">
</div>
</div>
</div>
I'm trying to accomplish a toolbar layout that includes 3 components. The left and center are flexible in size to the point where I don't think standard responsive breakpoints will do the job. The flexible center should be centered relative to the viewport when space allows. However, if the center and left would be overlapping, the center section is permitted to become off-center in order to avoid having to hide content.
Toolbar with wide viewport:
Toolbar with narrow viewport. Note the Section Title is not perfectly centered. This is desireable because it would overlap the breadcrumb:
I thought maybe flexbox could do this, but I'm struggling to make it work. Below is an attempt I have made to do this using flexbox.
HTML:
<div class="toolbar">
<div>Site / Section A / Section A1 / Section A1b</div>
<div class="section-title">This Section Title</div>
<div>Site Search</div>
</div>
CSS:
.toolbar {
display: flex;
background-color: #3F51B5;
color: white;
padding: 10px 0;
}
.section-title {
flex-grow: 1;
text-align: center;
}
http://plnkr.co/edit/YoD0yLWliXhu191jUrv4?p=preview
As you're using flexbox, you can use justify-content declaration instead of text-align.
Like this:
.section-title {
justify-content:space-between;
}
There's a great article about it here.
The links are going out of the navigation bar, because it is too tall (I think), and I want the items to go aside from eachother.
#navbar {
height: 21px;
width: 100%;
top: 200px;
text-align: center;
font-size: 20px;
}
Oh and here's the HTML:
<div id="navbar">
{block:AskEnabled}
<div class="navitem">{AskLabel}</div class>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<div class="navitem">{SubmitLabel}</div class>
{/block:SubmissionsEnabled}
<div class="navitem">{text:Link 1}</div class><div class="navitem">{text:Link 2}</div class><div class="navitem">{text:Link 3}</div class>
</div id="navbar">
Ignore the stuff in brackets like AskLabel, and the div class navitem, I got rid of it :P
Because your links are in divs, which are block elements, there is a page break between each div. You need to use something like a span or set display: inline on your navitem div elements.
See example: http://jsfiddle.net/7dPkQ/3/
Edit for clarification: spans by default have display: inline set. divs by default have display: block set. In your example, the links will go side by side if they are wrapped in an inline element. See also http://www.w3schools.com/cssref/pr_class_display.asp
Given some code like below, could someone show me how I could align the content-meta-wrapper inside of the content div at the TOP RIGHT corner and then have the content inside the content div wrap around it like in the image? The pink highlight in the image below is the content-meta-wrapper div.
<div id="content">
all the content you see except the Half BOX in the right hand side
<div id="content-meta-wrapper">
<div id="content-meta>
The right that is aligned at the TOP RIGHT of the content diva
<div>
<div>
</div>
The reason I can't just view source from the image is because the image is from how my site is now with moving some stuff around in Photoshop.
Assuming it's marked up inside of the content <div>, you just need to pass float: right; to it, and it should do the trick.
The code I used in This Example is the following:
#container { /* Pure Looks */
margin: 5px;
padding: 5px;
border: 1px solid black;
}
#floated {
height: 100px;
width: 100px;
float: right; /* This is what counts!! */
background: red;
}
See this Awesome Article about Floats - by Chris Coyer of css-tricks.com
You should use the css rules,
float:left;
float:right;
these will align your divs in the correct postion, to keep things tidy make sure to give your div's a width.