I'm working on a site for a friend at http://blueridgemusclecars.com/ . I want the logo at the top center, and the phone number and location right aligned, but I would like the text in the same plane horizontally as the logo. Right now the text is below and to the right of the logo. Here is my CSS for the header, any ideas?
header {
width:100%;
position:relative;
z-index:2;
}
h1 {
padding:45px 20px 37px 26px;
/*background:url(../images/h1-bg.jpg) 0 0 no-repeat;*/
/*float:right;*/
}
h1 a {
display:block;
width:500px;
height:278px;
text-indent:-999em;
margin:0 auto;
background:url(../images/logo.png) 0 0 no-repeat;
}
.address {
display:block;
font-size:14px;
line-height:28px;
text-align:right;
color:#b22300;
}
.phone {
display:block;
font-size:25px;
line-height:30px;
text-align:right;
color:#fff;
margin-top:-5px;
}
Set your .fright class to have a negative top margin.
.fright { margin-top: -100px; }
The markup could probably be reworked a little (e.g., not sure why the link and image are in an <h1>), but easiest thing on this page I think is adding the following to your CSS:
.wrapper { height: 300px; } //reduce empty space
.fright { margin-top: -195px; } //align phone number with image bottom
That looks pretty good in Chrome anyway...good luck!
Related
I'm trying to develop my first responsive website but I'm having some trouble (of course).
I need an element (sort of a menu) to contain 4 row of elements and each element has an image to the left and some text to the right. Now, the issue I'm having is that I can't seem to be able to make the elements center vertically correctly. I've tried several methods that seem to work for a lot of people so I thought I'ld ask if anybody knows why nothing seems to work for me.
This is what the image CSS looks like:
.tablaBuscadorElementos > img {
position: relative;
width: 20px;
height:20px;
left:0;
right:0;
top:0;
bottom:0;
margin:0 auto;
float:left;}
Here is the fiddle: http://jsfiddle.net/mampy3000/9JZdZ/1/
Appreciate any help!
since your elements are inline-block , you can inject an inline-block pseudo-element 100% height and vertical-align:middle it to img and span : DEMO
basicly (+ below update of your CSS):
.tablaBuscadorElementos:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.tablaBuscadorElementos {
height:22%;/* instead min-height so value can be used for pseudo or direct child */
border: 1px solid black;
padding:0px;
width:100%;
}
.tablaBuscadorElementos > span {
font-size:20px;
width:80%;
vertical-align:middle; /* align to next inline-block element or baseline*/
border:1px solid black;
display:inline-block;/* layout*/
}
.tablaBuscadorElementos > img {
vertical-align:middle; /* align to next inline-block element or baseline*/
width: 20px;
height:20px;
}
.tablaBuscador, .tablaBuscadorElementos{
display:block;
}
.tablaBuscadorElementos:before {
content:'';
height:100%;/* calculated from 22% parent's height */
display:inline-block;/* layout*/
vertical-align:middle;/* align to next inline-block element or baseline*/
}
You can do this by adding this css to .tablaBuscador
position: fixed;
top: 50%;
margin-top:-100px; /* half of height */
More info here: How to center a table of the screen (vertically and horizontally)
The newer option would be to use calc() but you might run into browser support issues.
position: fixed;
top:calc(50% - 100px).
Here are which browsers support calc(): http://caniuse.com/#feat=calc
Your code needs a major tune-up. You are floating elements, using vertical-align on them, positioning them relatively with left, right, top, and bottom set to 0. None of these make any sense. Here's a cleaned up fiddle: http://jsfiddle.net/jL2Gz/.
And here's a tuned up code:
* {
padding: 0;
margin: 0;
}
body {
height:100%;
}
.tablaBuscador {
font-family: "Maven Pro", sans-serif;
height:200px;
width:40%;
}
.tablaBuscador > div {
border: 1px solid black;
padding: 10px 0;
}
.tablaBuscador > div > span {
font-size:20px;
width:80%;
border:1px solid black;
}
.tablaBuscador > div > img {
width: 20px;
height: 20px;
}
.tablaBuscador > div > * {
display: inline-block;
vertical-align: middle;
}
I want the first picture to be aligned to the right bored of the black div, but I can't move the picture "Char" from where it is.
http://www.charlestonshop.it/homepageteo.html
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
}
div#container {
height:100%;
}
div#container div {
width:50%;
height:100%;
float:left;
background-repeat:no-repeat;
background-size:contain;
}
div#container div#left {
/* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
background-position: right;
background-color: black;
}
div#container div#right {
/* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
background-position: left;
background-color: white;
}
.charleft img{
max-width:100% !important;
height:auto;
display:block;
}
.charright img{
max-width:100% !important;
height:auto;
display:block;
float:right;
}
</style>
Add the below to your css, if you already have rules in place- add the additional styles as outline below:
#left{
position:relative; /* have a reference point for child positioning */
}
.charleft img{
position:absolute; /* position absolutely */
right:0; /* position on the right hand side of the parent, #left */
}
The benefit of this as opposed to using float, is you wont have to either clear the float, or accommodate for any changes it may later inflict on your layout.
You have to add float: right to .charleft div which contains the image
.charleft{
float: right;
}
it's very easy to do, just add this to your css code.
#left > .charleft{
float: right;
}
That's all.
I have a fixed width layout I am trying to make responsive, I have looked at the code and #wrapper div isn't adjusting to full width when I use the different views in Dreamweaver.
The footer I get a scroll bar and the footer, slider, top-bg are all not going full width. But the content area does?
I changed the wrapper to 100% thinking that this would adjust everything within the page to move full screen but that hasn't worked?
CSS:
/* Containers */
#wrapper {
width:100%;
}
#top {
width:900px;
margin:0 auto;
}
#top-bg {
background-color:#03274B;
width:100%;
overflow:auto;
}
#topnav {
width:900px;
margin:0 auto;
}
#topnav-bg {
clear:both;
background-color:#072C53;
width:100%;
padding:15px 0;
border-top:2px #2B4D71 solid;
border-bottom:2px #2B4D71 solid;
}
#banner-bg {
width:100%;
background-image:url(../images/bg/blue-bg.fw.png);
background-repeat:repeat;
}
#banner {
padding:0px 0;
width:900px;
margin:0 auto;
}
#subbanner {
width:900px;
margin:0 auto;
padding:30px 20px;
}
#subbanner-bg {
width:100%;
}
#subbanner h1 {
font-size:48px;
margin-bottom:20px;
padding-bottom:20px;
border-bottom:1px #000 solid;
}
#content-wrap {
width:900px;
margin:0 auto;
}
#leftside {
width:425px;
margin-right:50px;
float:left;
}
#leftside h2 {
padding-bottom:10px;
margin:20px 0px 10px 0px;
border-bottom:1px #000 solid;
}
#rightside {
width:425px;
float:right;
}
#rightside h2 {
padding-bottom:10px;
margin:20px 0px 10px 0px;
border-bottom:1px #000 solid;
}
#content {
}
#content-bg {
}
#content-wrap {
}
#footer {
width:100%;
margin:0 auto;
padding:20px 0;
}
#footer-bg {
clear:both;
background-color:#03274B;
width:100%;
}
#footer p {
}
Without posting your HTML markup we have to make some assumptions. I also suggest you do not use the design views in Adobe Dreamweaver as they bear very little relation to how a browser will render your page, I suggest you press F12 (Windows) or option + F12 (Macintosh) to view your page in your preferred browser.
The CSS you posted appears a little broken, I am assuming that in areas such as top {...} you actually have #top {...} as top is a non-standard element.
That being said you still have areas in your CSS such as:
#top {
width:900px;
margin:0 auto;
}
The element with id="top" will only ever be 900px wide despite the size of it's parent element (possibly id="wrapper").
Let's assume you have markup similar to the following:
<div id="wrapper">
<div id="top">
<div id="top-bg">
</div>
</div>
</div>
Despite the fact that #top-bg has width: 100% it will only ever be 900px wide as it is a child of #top and width percentages are relative to the parent container's width.
My issue is this, I have a header image that is larger than my browser, I wanted to do this because I want the image to become more or less visible based on your browser width. There is a color that repeats for when your browser is bigger than the image. On top of that I have an image that is centered and then two triangles on top of that. One floating left and one floating right. My issue is this, When I change the width for the .content-outer .content-inner from 978px to 1134px to accommodate the large image over the triangles it messes with the centering of my nav bar. Here is my code. the list styling is for my nav.
<div class="content-outer" id="top_nav">
<div class="content-inner">
</div>
<div class="content-outer" id="header_map">
<div class="diamond-left">
<div class="diamond-right">
<div class="content-inner">
</div>
</div>
</div>
</div>
#header,
#header_map {
height:529px;
background:#3b96a9 url(Layer-57.jpg) top center no-repeat;
margin-bottom:45px;
overflow:visible;
}
#header .diamond-left,
#header_map .diamond-left {
width:100%;
height:529px;
overflow:visible;
float:left;
background:url(Layer-58.png) top left no-repeat;
}
#header .diamond-right,
#header_map .diamond-right {
width:100%;
height:529px;
overflow:visible;
float:right;
background:url(Layer-59.png) top right no-repeat;
}
#header_map .content-inner {
height:391px;
background:url(Layer-61.png) top center no-repeat;
position:relative;
overflow:visible; }
#header .content-inner {
position:relative;
overflow:visible;
padding-bottom:20px;
}
.content-outer
{ width:100%; float:left; overflow:visible; }
.content-outer .content-inner
{ width:978px; margin:0 auto; overflow:visible; position:relative; }
.content-outer .content-inner ul
{ margin:20px 0; padding:0; }
.content-outer .content-inner ul li
{ margin:3px 0 3px 20px; padding:0; font-size:1.1em; }
.content-outer .content-inner ul li p
{ font-size:1em; }
Unless I'm misunderstanding something, the code appears to be OK. Have you double-checked to make sure:
The triangle images have transparent backgrounds so you can see behind them?
The main header background is in the right location as specified in the stylesheet?
If the page is live somewhere that we can take a look, please let us know - it may be able to shed more light on your problem.
In the videos playlist at the bottom, video description (background black) needs to go 20 pixels down. You will understand it better if you view the website with Firefox.
[links not working anymore]
#content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; }
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; }
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; }
#content #videos .playlist .entries .playing { background-position:0px -80px; }
#content #videos .playlist .entries .paused { background-position:-432px -80px; }
#content #videos .playlist .entries .progress { opacity:0.8; }
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; }
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; }
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; }
None of the suggestion above worked. I solved it with margin-left:-20px. Hate internet explorer!
IE6/7 has issues with mixing floats and absolute positioning. Try removing the position:absolute from #content #videos .playlist .entries .description p
Your link is broken, the correct url should be http://pangeaadvisors.org/SS.jpg
In Firefox 3.5 I see it exactly the
same as your screenshot of IE (20
pixels raised).
In IE6 I see it aligned to the base
but with 20px on the left
and IE7 the same as IE6 but with some glitch
in the scrolling.
In firefox the first 2 items are miss-placed, but the 3rd item in the playlist is displayed correctly. The factor effects this is the length of the title. Longer title display fine, shorter with the 20px gap, the line-height pushes the time-stamp down.
If you add another div inside the "video" wrapping around the title and define a height and width on this with overflow:hidden, it should standardize and stop the issue of some blocks being different heights to others.
With this done you can then use a couple of CSS hacks to write rules for any misbehaving browsers by using
position:relative;
top:XXpx
A little down-and-dirty but should work just fine. Can't be more specific since I can't actually re-create your problem in my browsers.