I am trying out "flex" with CSS.
I cannot get my nav bar to move to the right. I have tried for hours using margin, changing displays, using float. It won't move passed the middle... Sorry i'm still learning
I have pasted a link to my codepen to show you a better picture:
https://codepen.io/Saharalara/pen/pGyQWZ
The HTML
<div id="page-wrapper">
<header>
<div class="logo">
<img id="header-img" src="https://upload.wikimedia.org/" alt="Minnie Pic">
<span id="logo-name">Minnie & Friends Inc</span>
</div>
<nav id="nav-bar">
<ul id="nav-ul">
<li class="nav-link">Stories<li>
<li class="nav-link">Toys<li>
<li class="nav-link">Suscribe</li>
</ul>
</nav>
</header>
<body>
<container id="container1">
<section>
<h1 id="stories">Minnie & Friends Stories</h1>
<p>
Here you will find all of the best Minnie & Friends toys
and stories.
Choose from a huge variety of stories and the happy gang and they go on
many adventures.
</p>
<section>
<iframe id="video" height="180" src="https://www.youtube.com/watch?
v=crJ1CwD_TX0" frameborder="1" allowfullscreen ></iframe>
</section>
<h2 id="toys">Minnie & Friends Toys</h2>
<p>
Here you will also find many of your favourite characters
to choose from and order to arrive at your doorstep to continue their
adventures with you.
</p>
<h3 id="suscribe">Suscribe to our newletter</h3>
</section>
</container>
</body>
The Css
#page-wrapper {
position: relative;
color: black;
margin: -9px;
padding: 10px;
border: 4px solid;
border-radius: 3px;
background-color: rgba(223, 42, 42, 0.20);
padding: 10px 20px 20px 20px;
}
header {
display: flex;
font-size: 1.3em;
margin-left: -10px;
margin-right: -10px;
background-image: url('https://cdn2.vectorstock.com/i/1000x1000/07/66/pink-
white-star-polka-dots-background-vector-7590766.jpg');
opacity: 0.80;
}
#header-img {
height: 120px;
}
#logo-name {
font-size: 2em;
color: black;
}
h1,
h2,
h3 {
font-size: 2em;
}
//navigation bar
#nav-bar {
display: flex;
justify-content: flex-end; //**not working***
}
#nav-ul {
list-style-type: none;
display: flex;
}
nav li {
padding: 4px;
}
//body
p {
font-size: 1.2em;
}
#video {
border: 5px solid;
border-radius: 3px;
color: pink;
}
Fix 1
The best way to fix this (to me) is to control layout at the flex container (parent) level. It's straightforward and declarative.
header {
…
justify-content: space-between;
}
Fix 2
Another way is to add flex-grow: 1 to your #nav-bar.
#nav-bar {
…
flex-grow: 1;
}
In this instance, setting flex-grow to 1 tells the element to take up the available space in its flex container.
Fix 3
The non-flexbox way would be to add a left auto margin to the #nav-bar, effectively pushing it as far right as possible.
#nav-bar {
…
margin-left: auto;
}
since your header has display: flex property, his childs act like flex items.
So if you want to move whole .nav-bar to right you have to set margin-left: auto to .nav-bar so that element will be pushed to right.
Means .nav-bar will have as big margin as can without breaking on new line from left so element will move to right.
Since the Header element is the container just add justifi-content: space-between; and this will force the elements to go left and right. Another way is to put position: absolute; right: 0; to the nav-bar container but the first way is cleaner.
Related
Trying to put an image next to a paragraph but it does not seem to work.
This is what I have:
<div class="dhn-info-div">
<p>DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span></p>
<img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors">
<div style="clear:both"></div>
</div>
and CSS:
.dhn-info-div {
margin-top: 20px;
background-color: #a20e45;
width: 95%;
display: inline-block;
}
.dhn-info-div p {
padding: 20px 40px 20px 40px;
color: white;
font-size: 18px;
line-height: 35px;
word-spacing: 5px;
}
.dhn-info-div img {
float: right;
}
Image has to be on the right of the text. The div shouldn't be 100% in size. Cheers
This is how I want it to look:
http://i.stack.imgur.com/bPxbB.png
Depending on if you want to wrap the text around the image or have 2 columns, here’s both solutions:
If you want to wrap the text around the image it needs to be within the p tag. See example (I have also added 10px padding around the image).
If you want 2 columns you need to define the width of both so they fit in. I have also added float: left; to both and some padding to the image to make it look slightly better. See example
EXAMPLE
You needed to add some width to some elements such as the text
also you had no width or height on your image.
I also added top:40px; to your image to bring it down to the level of the text
Can you put the <img> in your <p> at top? that would fix it:
<div class="dhn-info-div">
<p>
<img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors" />
DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span>
</p>
<div style="clear:both"></div>
</div>
Edit: is now responsive!
i made this fiddle, check it http://jsfiddle.net/fYh7u/
you can wrap the text in a div, and the image in another div, inside the main div "dnh-info-div", in my example i miss the "div", at end of class, because is obvious.
HTML:
<div class="dhn-info">
<div class="dhn-text">
<p>devonshire house network is a <span class="text-purple">people-focused</span> membership club for director-level <span class="text-purple">professionals</span> in leadership roles who have an <span class="text-purple">instinctive focus</span> on <span class="text-purple">the human side of enterprise.</span></p>
</div>
<div class="dhn-img">
<img src="http://i.imgur.com/kzJiOjx.jpg" alt="" />
</div>
CSS:
.dhn-info {
width: 100%;
background-color: #a20e45;
display: inline-block;
}
.dhn-info .dhn-text {
width: 50%;
height: auto;
float: left;
padding: 20px 10px 0px 35px;
}
.dhn-info .dhn-text p {
font-family: arial;
font-size: 24px;
color: #fff;
line-height: 30px;
text-transform: uppercase;
word-spacing: 5px;
margin: 0;
padding: 0;
display: block;
}
.dhn-info .dhn-img {
width: 40%;
height: 100%;
float: right;
}
.dhn-info .dhn-text p > span.text-purple {
color: #9b59b6;
}
.dhn-info .dhn-img img {
display: block;
height: auto;
max-width: 100%;
}
I have a div message which basically has a text and a link. I want its size to be changing based on the string inside it. Also I want this message div to be centered inside its container.
I have been playing with it for a while without much luck. Here is the link to JSfiddle: http://jsfiddle.net/pDYJ8/
Also I don't know how make that text and link appear one after other ( not on the new line )
Here is the code:
<div class="container">
<div class="message">
<p>do you want to </p>
<a href="somewhere" target="_blank">
buy this product
</a>
</div>
</div>
.container {
position: absolute;
background: #666;
top:25%;
width:100%;
font-size: 15px;
color: #e47911;
}
.message {
margin-right: auto;
margin-left: auto;
background: #ddd;
width:100px;
}
Tried display inline block to fit its content but then it wouldn't center it inside its parent.
Keeping width 100px for now just to mock my requirements
Just Tweak Some CSS
See the demo fiddle.
.container {
position: absolute;
background: #666;
top:25%;
width:100%;
font-size: 15px;
color: #e47911;
text-align: center; /*added*/
}
.container .message {
display: inline-block; /*added*/
text-align: left; /*added*/
background: #ddd;
}
.message p { /*added*/
display: inline-block;
}
Explanation
The text-align center causes the now inline-block display of .message to center, which is then reset to have its own text-align back at left (this is not necessary). To get the a on the same line, the p also needs to be some type of inline display, here I chose inline-block as well..
I think you are over complicating things. All you need is a text-align: centeron the container and a display: inline-block on the message:
.container {
background: #666;
font-size: 15px;
color: #e47911;
text-align: center;
}
.container .message {
background: #ddd;
display: inline-block;
}
http://jsfiddle.net/Pevara/pDYJ8/9/
The inline block makes the div act as a word inside text, and the text-align center makes the 'word' align to the center...
Here is a simplified approach to a couple of the answers given. It reduces the amount of HTML and CSS needed.
CSS
.container {
color: #e47911;
text-align: center;
}
.message {
display: inline;
background: #DDDDDD;
}
HTML
<div class="container">
<p class="message">
Do you want to buy this product?
</p>
</div>
I would definitely put your anchor tag, <a> inside the paragraph tag, <p>.
You could even remove display: inline; from .message if you made it a <span> rather than a <p>.
Check this out:
http://jsfiddle.net/pDYJ8/10/
Changes made to above link
.container .message {
margin: 0 auto;
width:auto;
}
span{
background: #ddd;
display:inline;
}
You can simplify it with display: table; and margin: 0 auto;
.container {
display: table;
margin: 0 auto;
background-color: #DDD;
}
<div class="container">
do you want to buy this product
</div>
I have a div (navigation) that is "float:left;".
After this div main content comes. And second divs comes over the first one.
If I add style="clear:both;" after the first dif, then it works.
However, i wonder if this is the right way to do this, this is my only question.
<div class="nav">
<ul>
<li>text</li>...
</ul>
</div>
<div style="clear:both;"></div>
<div id="content-wrapper"></div>
.nav{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
}
.nav li{
float: left;
margin: 0 2px;
}
.nav li a{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #fff;
border-right: 1px solid #ccc;
background-color: #3b3d49;
-webkit-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
}
Yes, that works fine. However, you don't need another element to clear the content, you can add the style to the content wrapper.
In your style sheet:
#content-wrapper { clear: both; }
Another approach is to add a container around the floating element, and make it contain its children using the overflow style:
<div class="nav-container">
<div class="nav">
<ul>
<li>text</li>...
</ul>
</div>
</div>
<div id="content-wrapper">
</div>
Then in your style sheet add:
.nav-container { overflow: hidden; }
The main use of the above mentioned "clear:both"
The clear property specifies which sides of an element where other floating elements are not allowed.
"clear:both"
means No floating elements allowed on either the left or the right side.
In answer to your question, cleaning floats with clear:both; is a pretty standard way of doing this, yes.
this is the best way, just add class .group to your container
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
yes it is correct to see this example from the creators of html
http://www.w3schools.com/cssref/pr_class_clear.asp
You could use <br clear="all" /> for short hand. And another way is that you could use clearfix method, you could search it on google for the best. this is the method that #conner explained it.
Hell o, I have floating menu fixed on top of the screen of my single page web site. When I click the menu item, page slowly scrolls down to appropriate section using jquery. I have this code for fixed menu on top of the screen:
<style>
.fixed_elements{ position:fixed; top:100px; }
#top-floating-bar{ background: none repeat scroll 0 0 #2D2D2D; height: 35px; position: fixed; top: 0; width: 100%; z-index: 100; }
ul{ padding: 0; margin: 0; }
.fixed-bar-buttons{ float: left;color: #fff; }
.fixed-bar-buttons ul { height: 25px; padding-right: 10px; }
.fixed-bar-buttons ul li{ display: block; float: left; font-family: sans-serif; font-size: 14px; font-weight: bold; height: 25px; padding-left: 10px; padding-right: 10px; padding-top: 10px; }
.fixed-bar-buttons ul li:hover{ background-color: #605F5F; }
#content-panel{ float: left;margin-top: 40px; }
</style>
</head>
<body>
<div id="top-floating-bar">
<div class="fixed-bar-buttons">
<ul class="nav">
<li>REFERENCIE</li>
<li>KONTAKT</li>
</ul>
</div>
</div>
<div id="section2"> Section2 content</div>
<div id="section3"> Section3 content</div>
...
The code is OK and everything works fine. The thing I need to do is to modify the menu when it's on section2 and section3 only and add "UP" button.
When I load the page, I don't need the "UP" button, because It's not possible to go up and it's confusing to be there, so I need it only if I scroll down. Is it possible with CSS(1,2,3) only? Thank you!
Not possible, because you have to fetch the vertical offset of the document to know if the user is at the top of the page, or have scrolled down. The vertical offset is needed to make the decision whether to display the up button or not.
There is a way to do it with JS, but if you're asking for a CSS-only solution, I've given you the bad news already :P
I am in the process of designing a website for a film that is being released, but I am having some problems with getting it to fit in all browser windows sizes and screen sizes. Essentially, the markup, for example for the splash page, has the films logo at the top of the page, a video (the films trailer) under it, then an enter button that takes the user to the homepage. All of these should be centered on all browser window sizes. However when I try different sizes etc. the content does not remain centered and the video moves off of it's background image. How would I fix that with CSS?
There are a few other pages as well i.e. synopsis, videos and then a page to donate to the project. I would like these to work in the same way, keeping content working correctly on all sizes. Thanks!
If you want to look at this and see what I mean, the link is http://rescuedthemovie.com/new/home. This is the dev page and has basically no final design so it is somewhat messy but you can see what I'm talking about.
jwinton
Sounds like a problem with the way you are positioning your elements on the page. Take a look at:
http://www.w3schools.com/css/css_positioning.asp
Just add this to whatever divs you want to be centered. This should work on all browsers and will keep everything centered no matter the resolution.
#div {
margin:0 auto;
text-align:center;
}
I would suggest using this for the main content div, so everything is centered, then creating separate divs for the video, links, etc. That way you can position those where you want them inside the centered div..
I don't understand your design. I see the following problems.
You have a div id="container" but the only thing it contains is the div id="fotter". All the rest of the elements are "outside" the container div.
You have a div id="logo" with a style of margin-top: 1%; margin-left: 25%;. How will this center it?
Your div id="slider" has position: relative; left: 26%; top: 3em; which means that it is being pushed 26% from left and 3em from top of its origional position and leaving a "gap" where it was before.
Your h1 has a margin: left; 300px;. Where exactly you want it to be?
Underneeth the h1 you have a elements which contain div elements? This is like a block level element inside a in-line elements. Totally wrong. These all a elements should be inside a div and than that div should be positioned.
Your div#footer is inside the
div#container. The div#foooter
has a style of position: absolute
while the div#container does NOT
have a position: relative. This
causes 2 things. The div#container
collapses as it does not have any
content and the div#fotter is
positioned relative to the browser
window.
you have 3 div#recent. The ID has to be unique. This is not allowed. Use calsses instaed.
I will give a skeloton on how to go about this.
THE HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rescued: The Movie</title>
<link rel="stylesheet" href="my_styles.css">
</head>
<body>
<div id="container">
<div id="logo">
<img src="http://rescuedthemovie.com/new/images/logo.png" alt="Rescued Logo" />
</div>
<div id="nav">
<ul>
<li>home</li>
<li>synpsis</li>
<li>videos</li>
<li>blog</li>
<li>partner</li>
</ul>
</div>
<div id="slider">
<img src="http://rescuedthemovie.com/images/slides/slide1.jpg" alt="Slide 1" />
<img src="http://rescuedthemovie.com/images/slides/slide2.jpg" alt="slide 2" />
<img src="http://rescuedthemovie.com/images/slides/slide3.jpg" alt="slide 3" />
</div>
<div id="blog">
<h1>NEWS</h1>
<div class="recent">
<h2>The Putnam's Adoption Journey</h2>
My husband and I thought our family was complete. We had our two children (one boy and one girl) and were completely satisfied with that. Life was comfortable. My youngest had just started Kindergarten so I found myself with more free time than I had had in nine years! I was enjoying the freedom of grocery shopping without toddlers. But then God started stirring something in our hearts...
</div>
<div class="recent">
<h2>God's Divine Leading: Part 3</h2>
I remember feeling a little surprised that she had decided on adoption. I guess I just assumed that she would opt to keep her baby. I have to admit that I did wonder for a fleeting moment if perhaps the Lord was trying to lead Jurgen and I to adopt her baby, but then reasoned that a domestic adoption might be too risky. People might also think it strange, since I was the one who encouraged her to consider adoption in the first place, rather than end her baby’s life...
</div>
<div class="recent">
<h2>God's Divine Leading: Part 2</h2>
When I awoke, I had an overwhelming desire to have a baby of our own. The dream was extraordinarily real and tangible, and I felt strongly that the Lord had given me this dream as an answer to my questions about pursuing adoption. I am not the type of person who normally bases my decisions on dreams, but this was different. It was as if the Lord Himself had dropped this desire into my heart...
</div>
<a id="more" href="http://rescuedthemovie.com/blog">Read More</a>
</div>
<div id="footer">
<p>©2011 Rescued</p>
</div>
</div>
</body>
</html>
THE CSS
{
margin: 0;
padding: 0;
}
img
{
border: 0;
}
a
{
text-decoration: none;
color: #000;
}
body
{
background: url("http://rescuedthemovie.com/new/css/../images/blog_bg.jpg") no-repeat scroll center top #000;
}
div#container
{
width: 960px;
margin: 20px auto;
margin-bottom: 0;
}
div#logo
{
width: 850px;
height: 300px;
margin: 0 auto;
}
div#logo a
{
width: 100%;
height: 100%;
display: block;
}
div#nav
{
background: url("http://rescuedthemovie.com/new/css/../images/nav.png") no-repeat scroll 0 0 transparent;
font-size: 25px;
text-transform: uppercase;
}
div#nav ul
{
width: 900px;
margin: 10px auto;
}
div#nav ul li
{
display: inline-block;
margin: 0 40px;
color: #FFF;
}
div#nav ul li a
{
color: #FFF;
}
div#slider
{
width: 500px;
height: 250px;
margin: 0 auto;
margin-top: 77px;
float: right;
position: relative; /*romove this in the final design*/
}
div#slider img /*romove this in the final design*/
{
position: absolute;
top: 0;
left; 0;
}
div#blog
{
float: left;
width: 450px;
color: #FFF;
margin-bottom: 50px;
}
div#blog h1
{
margin: 20px 0;
}
div#blog a#more
{
float: right;
color: red;
}
div.recent
{
margin: 20px 0;
border: 1px solid #555;
padding: 5px;
}
div.recent h2
{
font-weight: bold;
color: #777;
margin-bottom: 10px;
}
div.recent a
{
color: #FFF;
}
div#footer
{
clear: both;
color: #FFF;
text-align: center;
font: 25px;
margin: 20px auto;
}
div#footer p
{
font-size: 25px;
}
This offcouse is an fixed width layout. But you can easily change it to fluid or estalic. This is how it looks