I am trying to get a fluid navigation bar done in Dreamweaver, which will also change the size of the logo when changing the viewport. This works and looks perfectly, except that the logo image will not stay vertically centered when it gets smaller.
<div class="gridContainer clearfix"> <div id="div1" class="fluid">
<div id="divL" class="fluid"><img src="images/logo.png" alt=""/></div><div id="divR" class="fluid">
<nav id="button1" class="fluid">Link 1</nav>
<nav id="button2" class="fluid">Link 2</nav>
<nav id="button3" class="fluid">Link 3</nav>
</div></div></div>
CSS:
.gridContainer {
padding-left: 0.8333%;
padding-right: 0.8333%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#div1 {
}
#divL {
width: 32.2033%;
text-align: right;
min-height: 65px;
height: 65px;
line-height: 20px;
}
#divR {
width: 66.1016%;
margin-left: 1.6949%;
clear: none;
text-align: center;
font-size: larger;
font-weight: lighter;
line-height: 65px;
}
#button1 {
width: 23.0769%;
margin-left: 0;
}
#button2 {
width: 35.8974%;
margin-left: 2.5641%;
clear: none;
}
#button3 {
width: 35.8974%;
clear: none;
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
I have of course tried many solutions found here and elsewhere, but nothing works since they dont seem to take the side by side elements of mine into account.
As you can see I have already tried playing around with a few stupid tricks in my frustration, but they wont do much either.
I think you need to add vertical-align:middle (img is a inline element like text).
#divL {
display:inline-block;
vertical-align: middle;
}
Related
I'm trying to get the three links - LOGO, About, and FAQ to show up on the same line, but I'm unable to do so. It seems that the margin-left on my nav-link class is screwing things up, but I'm not sure why.
body, html {
background-color: #EDEDED;
}
.nav {
position: absolute;
width: 80%;
margin: 5%;
}
.nav-link {
margin-left: 2%;
}
.nav-part {
display: inline-block;
}
.apply {
float: right;
position: relative;
right: 0;
top: 0;
}
<div class="nav">
<div class="nav-part">
LOGO
About
FAQ
</div>
<div class="apply nav-part">
<button>Apply</button>
</div>
</div>
Here's my jsfiddle - https://jsfiddle.net/hcrcba06/1/
the div that contains your links does not have much room to put the links on the same line so it brings the last one to the next line just increase the width of your nav-part class and it will work. JSFiddle here
You could easily solve that by changing it to CSS table layout.
body, html {
background: #EDEDED;
}
.nav {
display: table;
width: 80%;
margin: 5% auto;
}
.nav-part {
display: table-cell;
}
.nav-link {
margin-left: 2%;
}
.apply {
text-align: right;
}
<div class="nav">
<div class="nav-part">
LOGO
About
FAQ
</div>
<div class="apply nav-part">
<button>Apply</button>
</div>
</div>
It's because you are using margin in percentages.
Margins in percentages are always
relative to the width of the containing block.
Remove the margin-left in percentages. If you add a fixed margin it will work.
Use:
.nav-link {
margin-left: 12px;
}
instead of
.nav-link {
margin-left: 2%;
}
DEMO: https://jsfiddle.net/hcrcba06/3/
I am trying to code a website using CSS. My header looks like this below. It is consisted of two child divs - logo and topright. Whenever I minimize the width of the screen, topright gets shunted downwards onto the next row. The two divs are floated left and right respectively, and should share the same row. However, I do not want topright to be shunted to the next row. How can I fix this?
<div id="header">
<div id="logo">
<h1>Logo</h1>
</div>
<div id="topright">
<div id="phone">
<p>here</p>
<h6>Learn about out services</h6> </div>
<div id="ssl">
<img src="images/ssl.png" width="150" height="39" align="right" />
</div>
</div>
My css code is
#header {
width: 100%;
position:relative;
clear:both;
}
#logo {
float: left;
margin-top: 20px;
display: block;
}
#logo h1 {
text-indent: -2000px;
background:url(images/logo.png) no-repeat;
display:block;
}
#logo h1 a {
display:block;
width: 381px;
height: 97px;
}
#topright {
float: right;
margin-top: 20px;
display: block;
}
#phone {
float: left;
background:url(images/phone.png) no-repeat right;
height: 70px;
padding-top: 40px;
padding-right: 60px;
text-align:right;
}
#phone p {
font-weight:bold;
font-size: 1.4em;
}
#phone h6 {
font-weight:bold;
font-size: 0.8em;
color:#6F694F;
}
#ssl {
float: right;
margin-top: 40px;
margin-left: 20px;
}
Put min-width: 1000px into logo's css. This ensures that there is always 1000px, however hidden, that the topright div can fit inside even if it is off the screen.
Honestly - CSS and Divs aint the thing i'm most familiar with. However, I thought that I had managed to make the template for my later design, but it turns out that everything tends to move a bit around for me..
In Chrome, things seems to work at first, but after refreshing a few times, the text "your position on page" jumps down to the next line. In firefox, things are just at the wrong places to begin with.
If possibly, I would also like a nod on, how to get a padding/margin between the position text and again between each line. When adding it now, it just moves everything to completely wrong places.
Demo: http://cityroast.dk
CSS:
section {
width: 100%;
height: 100%;
background: #e8ebef;
padding: 5px;
}
div#catcontainer {
width: 10%;
height: 100%;
float: left;
}
div#categories {
width: 100%;
height: 100%;
float: left;
}
div#ads {
width: 100%;
height: 100%
float: left;
display: box;
}
div#ads span {
font-family: Verdana;
font-size: 12;
text-align: left;
}
div#one {
width: 10%;
height: 80px;
float: left;
}
div#two {
width: 70%;
height: 80px;
background: aqua;
float: left;
text-align: center;
}
div#three {
width: 10%;
height: 80px;
background: red;
float: left;
text-align: right;
line-height: 80px;
}
div a {
text-decoration: none;
color: #000000;
font-family: Verdana;
font-size: 12px;
}
HTML:
<section>
<div id="catcontainer">
<div id="categories">
<ul>
<b>A menu</b>
<li>Something</li>
<li>Something2</li>
<li>Something3</li>
</ul>
</div>
</div>
<div id="ads">
<span>Your position on page</span>
<div id="one">A picture</div>
<div id="two"><b>Title</b></div>
<div id="three"><b>Details</b></div>
</div>
</section>
Obviously, the latter part of the code is echoed 5 times at the moment, to get the 5 lines.
Thanks already!
bit of a CSS newb here. I'm using the fluid grid layout in Dreamweaver CS6. I created a headercontainer div, then headerleft and headerright divs inside it. I've added an image to headerleft and typed some text in headerright. I want to be able to have the text remain in line with the center of the image no regardless of resizing from the fluid layout.
What's the best way to do this? I put the two headers in a container div hoping that it will make it easy for me to align the two divs within the container, but I'm just not sure how to achieve it. Here's the code I currently have for this section of the page:
EDIT: Code Now says (but still doesn't work):
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 90.5666%;
padding-left: 0.2166%;
padding-right: 0.2166%;
}
#headercontainer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-align: left;
}
#headerleft {
clear: both;
float: left;
margin-left: 0;
width: 49.7607%;
}
#headerright {
clear: none;
margin-left: 0.4784%;
width: 49.7607%;
}
And the html says:
<div class="gridContainer clearfix">
<div id="headercontainer">
<div id="headerright">
<h2>Support For All Your Gadgets & Tech!</h2>
</div>
<div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2>
</div>
</div>
Thanks a lot!
remove display:block; from your #headerleft and #headerright
Also, you can only set float:left; on the headerleft id, and put the div headerright before the left one in your html code.
Try this code:
.gridContainer {
margin-left: auto;
margin-right: auto;
width: auto;
padding-left: 15px;
padding-right: 15px;
}
#headercontainer {
float: left;
margin-left: 0;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-align: left;
position:relative;
}
#headerleft {
float: left;
margin-left: 0;
width: 50%;
}
#headerright {
clear: none;
margin-left: 50%;
}
<div class="gridContainer clearfix">
<div id="headercontainer">
<div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2>
</div>
<div id="headerright">
<h2>Support For All Your Gadgets & Tech!</h2>
</div>
</div>
</div>
I am making a basic template for a website. It has div containers of 1 header, a main menu listed horizontally below the header, the main content which is a google maps iframe (variable width) and a sidebar (absolute width, floated right) and a footer.
I am having some trouble with the height of the main content. I would like the iframe and the sidebar to have equal height whilst fitting to the page and leaving a margin for the footer but the main content always sets itself to min-height rather than stretching to the page.
HTML
<body>
<div id="wrapper">
<div id="header"><img src="images/logo.png" width="360" height="127" /> </div><!--header-->
<div id="menu">
<ul><li>Home</li>
<li>About</li>
<li>Network</li>
<li>Help</li>
<li>Contact</li></ul>
</div><!--mrnu-->
<div id="content">
<div id="sidebar">
Sidebar
</div><!--sidebar-->
<div id="main">
<iframe id="map" width="100%" height="auto" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?q=52.988337,3.120117&num=1&ie=UTF8&t=m&z=6&ll=51.206883,7.756348&output=embed"></iframe>
</div><!--main-->
<div class="clear"></div>
</div><!--content-->
<div class="push"></div><!--push-->
<div id="footer" class="footer">
</div><!--footer-->
</div><!--wrapper-->
</body>
</html>
CSS
body {
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
font-size: 75.00%;
color: #fff;
background: url(images/bg.png);
}
a{
color: #090;
text-decoration:none;
}
a:focus, a:hover, a:active {
color: #FFF;
text-decoration: underline;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
* {
margin: 0;
}
html, body {
height: 100%;
}
/* div tags */
#wrapper {
width: auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#header {
position: relative;
width: auto;
height: auto;
background-color: #090;
}
#menu {
width: auto;
height: auto;
border: 2px solid #000;
font-size: 18px;
}
#menu ul {
padding: 0px;
margin: 0px;
text-align: center;
}
#menu li {
display: inline;
padding: 50px;
}
#content {
width: auto;
height: 100%;
}
#main {
width: auto;
margin-right: 125px;
}
#map {
width: 100%;
height: auto;
}
#sidebar {
width: 125px;
height: auto;
float: right;
text-align: center;
background-color: #FC0;
}
#footer {
width: auto;
height: 125px;
background-color:#CC0;
}
/* classes */
.clear {
clear: both;
}
.footer .push {
height:125px;
}
Note: There may be 1 or 2 unused lines of code that I haven't spotted when I've been playing around with it so if anything seems out of place then it probably is.
I have seen solutions to this problem with fixed width containers, but I think the problem lies in my use of the float function. I have read that positioning needs to be absolute for this to work properly, however using float is the only way I have been able to find that allows the map to fill the space using variable width.
It could be something as simple as being incompatible with the browsers I am testing on but I'm not sure.
Thanks in advance and sorry if this post is a bit messy. I'm sure I will learn to keep clean soon enough ;D
Try these style changes-:
#map {
width: 100%;
// height: auto;
}
#content {
width: auto;
//height: 100%;
height: auto;
}
Setting #content to height:auto pushes the #footer div to meet the #content div.
and in <iframe> set height to 100% (or 80% to show footer). It still leaves the issue of the map div now pushing the footer to below screen height. To deal with that, possibly set an absolute height for the iframe, or use an alternative to iframe.