So, I'm trying to get divs with background pics to display on my web page. In IE it looks just fine, but in chrome the page looks good when it's not full screen and when you make the window full screen the border on div 2 is about 20 pixels too wide on the right side. The first div should be the size of available screen and the second 75% of that centered.
It also looks as if chrome doesn't see my 100% height on the first div.
Here's my css style sheet:
#charset "utf-8";
/* CSS Document */
#main {
background-repeat:no-repeat;
background-size:cover;
font-size: 24px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
padding:40px;
height:100%;
width:100%;
position: relative;
background-image: url(../graphics/craig-smith-background.jpg);
}
#body {
min-height:500px;
width:75%;
background-repeat:no-repeat;
background-image: url(../graphics/back2.jpg);
margin: 0 auto;
position:relative;
border:groove;
border-color:#333;
border-width:5px; (edit)
padding:0;
}
I've played with padding and margins on both divs but just cant seem to figure this one out.
(edit) I should specify, there is a 20px space between the border and the picture on the right side where you can see the background pic of div 1.
border:groove;
border-color:#333;
border-width:thick;
Don't use thick, specify the number of pixels you want. "2px", 5px", whatever.
The problem was dreamweaver not updating the local files, I changed a picture file in photoshop and saved it. Dreamweaver didn't see the file update.
Related
Wondering if someone can help.
I'm a beginner learning website development and have been playing around with different styles for a particular project. The one I'm trying at the moment has a background colour, on top of this is a central wrapper of 60% width which contains all the website gumph. on the sides of the wrapper I have text turned 90/270 running down the wrapper with the website name.
When I go to resize the website the text jumps, how do I get the text to stay in it's original position? Also a secondary question, the text I have put as a % in CSS, however it doesn't seem to resize with the screen, even if I try em, here is the css:
*{
background-color:#085C08;
max-width:100%;
max-height:100%;
min-width:200px;
margin:0 auto;
}
.wrapper{
width: 60%;
background-color: #FDF3EC;
margin:0 auto;
margin-top:-1%;
margin-bottom:-1.5%;
}
.artwork-r{
transform:rotate(90deg);
white-space:nowrap;
transform-origin:bottom;
margin-top:-52.5%;
margin-left:78.65%;
position:absolute;
width:0%;
height:0%;
clear:both;
}
.artwork-r p{
padding:0%;
font-size:490%;
font-family:Verdana, Geneva, Tahoma, sans-serif;
color:#FDF3EC;
}
.artwork-l{
transform:rotate(270deg);
white-space:nowrap;
transform-origin:top left;
margin-left:15.1%;
margin-top:0.4%;
position:absolute;
width:0%;
height:0%;
clear:both;
}
.artwork-l p{
padding:0%;
font-size:490%;
font-family:Verdana, Geneva, Tahoma, sans-serif;
color:#FDF3EC;
}
when position the text, don't use margin-left or margin-top, those will change as the screen size changes. You should use top, bottom, left and/or right.
For the font size, em's and % are both based NOT on the screen size, but instead it's parent's font size. Without seeing your markup I am not 100% sure, but you will probably want the position of .artwork-l to be set as right: 100%;
I am trying to create a simple navigation menu that is fixed to the top of the screen, and will take up 10% of any screen's height. I also would like the navigation bar to be functional on all devices regardless of screen height and width; what I currently have gets messed up quite horribly if you should resize your screen or have a resolution that is naturally low. Also, I would like to have the text for each tab to be centered vertically, a task I am struggling to fix, having tried many methods, such as changing the padding, vertical-align, margins, and so on. I have searched and searched and tried many different approaches, such as using JavaScript to accomplish this, all without luck.
My current css:
#nav {
height:10%;
background-color:rgb(52, 152, 219);
position:fixed;
top:0;
left:0;
width:100%;
color:white;
font-family: Calibri;
font-size:24pt;
text-align:center;
}
#nav a {
display:inline-block;
height:100%;
padding-left:15px;
padding-right:15px;
}
#nav a:hover {
background-color:rgb(41, 128, 185);
}
And my HTML:
<div id="main">
<div id="nav">
<a>Home</a>
<a>Page2</a>
<a>Page3</a>
<a>Page4</a>
<a>Page5</a>
</div>
</div>
Thanks!
I fixed a couple things in your css and wrapped the links in div's.
#nav {
height:10%;
background-color:rgb(52, 152, 219);
position:fixed;
top:0;
left:0;
width:100%;
color:white;
font-family: Calibri;
font-size:24pt;
text-align:center;
}
#nav div {
display:inline-block;
padding:15px;
}
#nav div:hover {
background-color:rgb(41, 128, 185);
cursor:pointer;
}
And the HTML
<div id="main">
<div id="nav">
<div><a>Home</a></div>
<div><a>Page2</a></div>
<div><a>Page3</a></div>
<div><a>Page4</a></div>
<div><a>Page5</a></div>
</div>
</div>
Looked ok on browser resize, let me know if that's still an issue.
You can add to your nav css "z-index: -1;" to set it behind the rest of the content. You may need to add "z-index: -2; to you body css to keep your background image behind the nav bar. That should fix it to the top of your screen at least and have it remain there while the rest of the content scrolls
As for having the sizing go crazy, it's because you have a set font size. I think setting your font size to 2em will keep it at 24 for common size screens, but will allow it to adjust to smaller windows.
I'm trying to create a banner featuring some services I provide, the image below is exactly how I want it (desktop view) but when I resize the browser the text gets pushed underneath the image and is hidden by over elements of the page overlapping.
How do I make it so the image and text resize with the browser and looks exactly the same as it does on desktop?
I created an example on here http://jsfiddle.net/b7a8cvLb/4/
And my CSS
.info_banner {
background-color:white;
max-width:1166px;
margin:0 auto;
padding: 5px 5px 0px 5px;
text-align:center;
font-size:1em;
height:65px;
}
.info_block {
display:inline-block;
width:20%;
border-right-style:solid;
border-right-width:2px;
border-right-color:#F8F8F8;
height:65px;
vertical-align: text-top;
}
.info_block img {
max-width:100% !important;
height:auto;
display:inline-block;
float:left;
}
.info_block h5 {
height:100%;
width:100%;
margin:0;
}
If needs be I can set the images to display:none at a certain browser width but I'd prefer to avoid doing this.
I can see your images are already scaling down, if you want to scale down your text too you'll need to step it down using media queries.
Hope that helps!
I know it sounds really weird, but I'm trying to code a website with very little CSS knowledge. It's just a test website, so that I can get into the language a bit more, but I'm having some troubles. I can't find the answers anywhere. In case necessary, I've included the HTML and CSS files at the bottom.
1. Center Body
I was wondering how to center the body of my website? I know it seems simple, but I've looked on every single Google link and I can't find a solution. When I zoom in to test my website on 175% zoom increase, as that's what most monitors have at least, I notice that my browser is scrolling in to the left side of the website, rather than the center. I would like the elements of the website to be in the center, so that it doesn't end up with a blank space on the right like YouTube has for larger monitors. However, I have no idea on whether or not there is there a way I can make the website zoom to the center?
2. Multiple Images
When I was slicing the website layout I made, I took three images from one of the 'rounded rectangle' shapes. My aim is to make it so I can have the shape become expandable, meaning that it'll be a small box [ ] for small numbers, but if the number has more digits, the box can expand without breaking the website. Because of this, I sliced the LEFT and RIGHT side of the content box, as well as a 1px inside which I hoped to expand. I have no idea where to look for a tutorial, however, on how to make them all work together. If somebody could point me in the right direction, I'd be extremely grateful.
3. Following
Resolved - a huge thanks to Nicole Bieber who helped me out! :-)
Many thanks.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> .. </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
..
<div id="header"></div>
<div id="navigation">
<div class="founders2">
<div id="left_content">
<div class="news">Latest News & Information</div>
<div id="right_content"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS:
#logo {
background:url(images/main/logo.png) top left no-repeat;
width:391px;
height:148px;
font-size:0px;
margin:-10px 0 0 0;
float:left
}
body {
margin:0px;
padding:0px;
background:url(images/main/bg.gif) repeat;
#31
}
#header {
margin:0 auto;
width:100%;
height:147px;
background:url(images/main/header_bg.gif) repeat-x;
}
#navigation {
width:100%;
height:500px;
background:url(images/siteSlice_13.gif) repeat-x;
}
#founders1 {}
#left_content {
float:left;
width:910px;
height:100%;
}
#right_content {
float:right;
width:490px;
height:100%;
}
#footer {
margin:0 auto;
clear:both;
width:100%;
height:77px;
background:url(images/siteSlice_96.gif) repeat-x;
}
/**
* Needs to be aligned vertically.. no idea how.
**/
.news {
font-family:ubuntu;
font-size:25px;
color:#FFFFFF;
text-shadow: 2px 2px #000000 12;
text-align:left;
text-indent:15px;
width:100%;
height:100%;
background:url(images/main/news_header.gif) no-repeat;
margin:100px;
}
.founders2 {
background:url(images/main/founders_navbar.gif) no-repeat;
width:265px;
height:52px;
margin:0 0 0 600px;
}
Anything not in the /main/ image folder hasn't been re-edited by myself yet, but is still a basic image that should act in the same way as when a new one replaces it.
Centered Page Content
One way you could center the body of a fixed width page layout with could be done with Auto Margins, as I will show in the following example
This is a basic example with only a div element which will be our website container.
You can apply a fixed with either to the container or to the body, and apply the automatic margins to the container itself...
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="center.css" rel="stylesheet" type="text/css">
<!---
other header and meta stuff ...
--->
</head>
<body>
<div id="box_content">
<p>
My Content Area.
</p>
</div>
</body>
</html>
and the CSS for the above:
CSS for Center Aligned Content using Centered Body
In this CSS example for the above HTML code, we center our container (div) element by applying a fixed width to the Body element, and assigning Auto margins to the same element. The margins will expand evenly on both sides to preserve the fixed 800px with, thus centering the page:
#charset "utf-8";
/* CSS Document */
body{
/*
Applying a fixed width with automatic margins will center the page:
*/
width: 800px;
margin-left:auto;
margin-right:auto;
/*
and whatever...
*/
margin-top: 5px;
margin-bottom: 0px;
/*
Here we have a gray background so we can see the centered content area
*/
background-color:#CCC;
}
/*
Our content area will be white so we can see it centered over the gray background.
*/
#box_content{
background-color:#FFF;
overflow:auto;
padding:5px;
}
However, you can also apply the fixed width to the container itself instead.
The following example works with the above HTML code.
CSS Example with centered div element
#charset "utf-8";
/* CSS Document */
body{
/*
Here we have a gray background so we can see the centered content area
*/
background-color:#CCC;
}
/*
Our content area will be white so we can see it centered over the gray background.
*/
#box_content{
/*
Applying a fixed width with automatic margins will center the page,
will also work on the container itself:
*/
width: 800px;
margin-left:auto;
margin-right:auto;
/*
and whatever...
*/
margin-top: 5px;
margin-bottom: 0px;
background-color:#FFF;
overflow:auto;
padding:5px;
}
Both of the above CSS examples look exactly the same. (Should look the same on all the modern web browsers ).
There are various other ways to center using CSS ( including setting Position to 50% with a -400 margine, but this breaks on some renderers ).
The approach I have demonstrated is simply my simple but my preferred approach to centered fixed width layouts.
Also, I removed the 100% width values on your nested elements that dont need them ( div elements will default to 100% width anyhow )
100% Height will not work, a div element will not expand vertically to its container, unless you use absolute positioning ( but will expand to page size, and not the parent container size ). DynamicDrive has examples on how to do this.
Also looking at your Source, I suggest changing the following:
font-family:ubuntu;
Because it is not a font family recognized by all operating systems, so visitors to your web page will most likely not see the same fonts you see on your own system. unless you use ServerSide Fonts.
If you don't use a server side font, it would be best to stick to common fonts and font families that (usually) exist on all major operating systems if you want all users on all major operating systems to see the same font regardless of whichever web browser they use.
3 Slice Buttons
One again - there are more than one way to do this. One of the easier ways to do it would be to layer 3 divs and apply a slice to each layer. The following example is from a simple resizable button in one of my own template designs, a simple box-model button to say the least.
Note: I think nesting div elements in a << a >> hyperlink is considered a bad practice? Although I do it anyhow ... I could be wrong.
HTML
<a href="contact.php" style="float:right">
<div class="b_1"><div class="b_2"><div class="b_3">
Contact
</div></div></div>
</a>
The CSS for the above button:
/*
Contains the left slice of the button:
*/
.box_nav a .b_1{
float: left;
margin-top: 3px;
background-image: url(ui/ui_19.png);
background-repeat: no-repeat;
}
/*
Contains the Right slice of my button:
*/
.box_nav a .b_2{
background-image: url(ui/ui_23.png);
background-repeat: no-repeat;
background-position: right;
}
/*
COntains the tiled center slice of the button
*/
.box_nav a .b_3{
background-image: url(ui/ui_21.png);
height: 43px;
margin-right: 10px; /* This margin is the same width as the RIGHT slice */
margin-left: 10px; /* This margin is the same width as the LEFT slice */
line-height: 40px; /* my way of centering text vertically in the button */
text-align: center;
/*
prevents buttons with more than one word ( has spaces ) from breaking into two lines
*/
white-space: nowrap;
}
.box_nav a:hover .b_1{
background-image: url(ui/ui_24.png);
}
.box_nav a:hover .b_2{
background-image: url(ui/ui_28.png);
}
.box_nav a:hover .b_3{
background-image: url(ui/ui_26.png);
}
As seen above, this is a box model structure. The box_nav itself however requires "overflow:auto;" or "overflow:hidden;" however if height is not set explicitly.
The above button from my actual example looks like this:
Final Section
As for your 3rd question, I don't actually understand what you are asking, and the html/css combination breaks in my browser when I copy your code. ( also I cant see it properly because I also don't have your images. I'm not sure what you were trying there, but i looks like your were trying a 3 column layout?
Your html for this section pretty much completely falls apart in my browser ( and also in dreamweaver )
UPDATE:
As requested by you, here are two ways to do fluid layouts:
In this example, you can use the same automargins with a fluid width like this ( simply modify the fixed 800PX width to a fluid width, such as 80%
width: 80%;
margin-left:auto;
margin-right:auto;
If you want fixed margins with a fluid layout, you can simply set margins, but do not set a width:
width: auto;
margin-left:100px;
margin-right:100px;
I am having a problem displaying a webpage on Safari. It will not display center, but will instead displays the page to the left and has a huge amount of empty space to the right of it. I don't get this behaviour with Firefox, IE, or Chrome. Can anyone tell me what is going on and how to fix it. The website can be viewed at: digitaldementia.ca. You can view the CSS from your browser when you visit the site. If it is desired I can post it here as well.
Thanks for your help.
Try this CSS:
html, body{
text-align:center;
}
#main_container{
margin:0px auto;
text-align:left;
width: 900px; /* set width accordingly */
}
where #main_container is supposed to be the main container/wrapper of your site.
In your case the huge amount of empty space comes from your div #copyright
Solution:
#copyright {
color:#B8DBFF;
padding-right:25px;
position:relative;
text-align:right;
top:20px;
}
or
#container {
color:#FFFFFF;
margin:20px auto;
padding:0;
position:relative;
text-align:left;
width:989px;
overflow:hidden; /* added */
}