I have this navigation and its not showing up in the position I want it to.
http://jamessuske.com/thornwood2/
I would like to have it next to the logo on the right side, for some reason it shows up on the right at the very top. (kinda hard to describe, but im sure once u see it, u will know what I am talking about)
HTML CODE
<div class="header">
<div class="logo">
<img src="images/logo.jpg" width="350" height="120" border="0" />
</div><!--logo-->
<div class="nav">
Home | About Us | Gallery | Contact Us
</div><!--nav-->
</div><!--header-->
CSS CODE
.header{
width:1009px;
}
.logo{
float:left;
width:350px;
}
.nav{
float:right;
width:260px;
color:#FFF;
}
Also while I am here in IE 7 there is a gap between the topConent and the contentArea, also between the contentArea and bottomContent
http://jamessuske.com/thornwood2/
HTML CODE
<div class="topContent">
<img src="images/top.gif" width="1009" height="37" border="0" />
</div><!--topContent-->
<div class="leftContent">
<img src="images/leftSide.gif" width="48" height="494" border="0" />
</div><!--leftContent-->
<div class="contentArea">
</div><!--contentArea-->
<div class="rightContent">
<img src="images/rightSide.gif" width="49" height="494" border="0" />
</div><!--rightContent-->
<div class="bottomContent">
<img src="images/bottom.gif" width="1009" height="39" border="0" />
</div><!--bottomContent-->
Any help with either issue would be greatly appreciated.
Thanks
.nav { float:left; }
if you want it next to the picture. If you want it on the right but further down - just crop your picture. It has some whitespace up the top, or add margin-top:20px or so.
IE7 bug
As of the bug you need to remove padding and margin from each picture and div so do something like this for each div.
.top-content
{
padding:0px;margin:0px;
}
.top-content img
{
padding:0px;margin:0px;
}
Related
I'm having trouble with putting a logo in my header.
Looking at https://www.w3schools.com/css/css_float.asp it should be as easy as using the float property. However my logo sits below my header and I can't figure it out. Any help would be appreciated.
<h1>Azure Travel Agency<img src="logo.png" alt="Logo"
style="float:right;width:150px;height:150px;"></h1>
you can also use this method to display logo in header
.logo{
width: 250px;
height: 80px;
text-align: center;
background: #ffffff;
}
</style>
</head>
<body>
<div class="logo">
<img src="logo.png"/>
</div>
you have wrong with your styling! your image is inside a h1 tag! and h1 tag has block display!
use this:
<div style="float: right;">
<h1>
<img src="logo.png" alt="Logo" style="width:150px; height:150px;" />
Azure Travel Agency
</h1>
</div>
if code above doesn't work then please write all of your header code! I'll fix it.
The floating elements must come before the text/elements that is meant to float around them:
<h1>
<img src="logo.png" alt="Logo" style="float:right; width:150px; height:150px;" />
Azure Travel Agency
</h1>
or
<img src="logo.png" alt="Logo" style="float:right; width:150px; height:150px;" />
<h1>
Azure Travel Agency
</h1>
Although the desktop website functions properly, the mobile site from phone is warped. The text in the right column is larger than the left.
(for the following two pages)
http://www.beijosevents.com/galleries/
http://www.beijosevents.com/shopbeijos/
HTML:
<div class="aligncenter"><!-- WEDDINGS HEADER START -->
<img src="http://www.beijosevents.com/wp-content/uploads/2014/07/weddings.png" alt=“weddings” height="80" />
<!--WEDDINGS GALLERY START-->
<div class="gal"><img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2015/01/wedding-jen-mark.jpg" alt=“jenmarkwedding” width="300" height="200" />
jen + mark
david medal</div>
<div class="gal"></div>
<div><img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2014/10/1-cover2.jpeg" alt=“jessicamikewedding” width="300" height="200" />
jessica + mike
jaqueline pilar</div>
<!-- WEDDINGS GALLERY END-->
</div>
CSS:
#gallerypagewidth{width:700px;margin:auto;}
.gal{float:left;clear:both;}
I have no idea what is causing the text to increase in size as the window size is reduced... but floating the divs on the right will solve the issue. You also have a few empty divs that are probably not needed.
You could try it this way, HTML:
<div class="gal first">
<a href="http://www.beijosevents.com/shine-crazy-diamond/">
<img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2015/01/styled-shoots-shine-on.jpg" alt="“shineonyoucrazydiamond”" width="300" height="200">
</a><br>
shine on you crazy diamond<br>
megan welker
</div>
<div class="gal">
<a href="http://www.beijosevents.com/bhldn-secret-garden-shoot/">
<img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2014/10/1-cover1.jpg" alt="“bhldnautumnwedding”" width="300" height="200">
</a><br>
BHLDN secret garden wedding<br>
megan welker
</div>
<div class="clear"></div>
...
CSS:
.gal {
float: left;
margin-left: 50px;
}
.first {
margin-left: 0;
}
.clear {
clear: both;
}
I think I am having an issue with my floats, they are not aligning correctly and I feel like it has to do with the way I have my boxes setup. I have tried changing the alignment with margin-left and right but am not getting the desired look, I would like all of it to lineup. Here is the html and css.
HTML
<div id="service1">
<center>
<h1>Savings <br />Strategies</h1>
<img src="images/eg1.png" class="alignleft" height="150" width="200" alt="" />
</center>
</div>
<div id="service2">
<center>
<h1>Vendor <br />Management</h1>
<img src="images/eg2.png" class="alignleft" height="150" width="200" alt="" />
</center>
</div>
<div id="service3">
<center>
<h1>Environmental<br /> Stewardship</h1>
<img src="images/eg3.png" class="alignleft" height="150" width="200" alt="" />
</center>
</div>
CSS
#service1 {
float:left;
width:360px;
height:280px;
padding:15px;
}
#service2 {
margin-left:auto;
margin-right:auto;
width:360px;
height:280px;
padding:15px;
}
#service3 {
float:right;
width:360px;
height:280px;
padding 15px;
}
Thanks in Advance!
Why not try displaying each div as an inline-block. Remove all the floats and margins as well.
div { display: inline-block; }
You could set display to inline and remove all the margins:
http://jsfiddle.net/ABVJd/2/
Result: http://jsfiddle.net/ABVJd/2/embedded/result
Either that,, or you could remove all margins and floats and add inline-block, as suggested:
http://jsfiddle.net/ABVJd/3/
Result:http://jsfiddle.net/ABVJd/3/
I am fairly new at this, so, this may seem like a very simple question to answer.
I've started to design my own page, and the code below is where I am at so far.
How it's looks is...
top left - my logo
top right - navigation
left hand side - images / descriptions
What I am trying to do, and where I am getting stuck, is getting the description to align perfectly underneath each image, and have that same thing happen as you move right across the page.
What is currently happening is that each image, and description underneath, are aligning on the left all the way down the left side of the page.
Current code below:
<body>
<div class="container">
<img src="#" alt="Title" width="300" height="100" />
<div id="navbar">
<ul>
<li>GALLERY</li>
<li>ABOUT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
<div id="images">
<img src="#" width="300" height="199" alt="name"></div>
<div id="descriptions">City</div>
<div id="images">
<img src="#" width="300" height="199" alt="name"></div>
<div id="descriptions">Model</div>
</div>
</div>
</body>
I'd use markup like this:
<figure class="images">
<img src="#" width="300" height="199" alt="City">
<figcaption>City</figcaption>
</figure>
<figure class="images">
<img src="#" width="300" height="199" alt="Model">
<figcaption>Model</figcaption>
</figure>
<figure class="images">
<img src="#" width="300" height="199" alt="Foo">
<figcaption>Foo</figcaption>
</figure>
And some sample CSS:
.images {
float: left;
width: 300px;
min-height: 200px;
margin: 0 10px 0 0;
background-color: #EEE; /* just to show containers since image scr is blank */
}
.images:last-child {
margin-right: 0;
}
.images figcaption {
text-align: center;
}
Fiddle
EDIT: This might make more sense, check this image. http://puu.sh/rt8M
The image just goes through the padding. I want the title div to expand vertically to accommodate the image. While keeping the text centered and the center of the image should intersect the line the text is on.
I want to align an img to the left (and then another after the text to the right). I've tried various properties but none seem to do it right. Can anyone help?
To clarify, I want the image against the left side of the screen or browser window. The div stretches from the left to the right of screen, as you would expect of a header/title div.
Float;left seems to make the img drop out of the div tag. I should mention there is a text-align:center; property on the tag. But it doesn't fix the problem when removed so I'm not sure it's that.
The HTML
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" width="86" height="98" />
Page Header Title
</h1>
</div>
</div>
I created a little dabblet code example for you. I think this is what you are trying to do?
http://dabblet.com/gist/2492793
CSS:
.logo{
float:left;
width: 86px;
height:98px;
display:block;
}
.img2{
float:right;
display:block;
}
.clear{
clear:both;
}
HTML:
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" />
Page Header Title
<img class="img2" src="images/img2.png" alt="" />
<div class="clear"></div>
</h1>
</div>
</div>
The reason the logo is dropping out of the div is because it is not cleared.
This should fix things up.
Use this
<div id="header" style="float:left">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" width="86" height="98" />
Page Header Title
</h1>
</div>
#logo{
display: flex;
justify-content: space-evenly;
}
<div id="logo">
<img src="https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="something" width="100" height="100"/>
<h1>Hello World</h1>
</div>