I want the first layer to expand to the whole screen when I apply my CSS properties. There are margins, left and right of the page.
What I want is similar to this.
The first layer is that one in black color.
How can I expand mine to the whole screen, then organize the content inside the remaining part?
Here is the CSS I have just proposed with my first layer:
#main{
margin-top:0px;
width: 100%;
height: 600px;
background-color: blue;
}
You have to be more specific, a layer and a table are two very different things. Also, the BBC site you referenced as well as most new websites use <div> tags to organize their html rather than tables. If you could be more specific with some HTML examples you would get a lot more help.
If you have a heading <div> that has similar styling to the css you posted, then have a content wrapper <div> that you could set the width on it should do what you wanted.
Again, if you can be more specific, we can give more specific help.
Related
I'm using the Twenty Fourteen theme in my WordPress web site. On one of the pages I want to add images on the left side of the content area (menu sidebar is to the left of that) such that the text wraps around the image.
I have added two images (near the third and fourth H4 tags, if you take a look at the page) and both of the images are being forced behind the left sidebar due to the theme's -168px margin-left setting on the image's parent figure element.
On the page, if you use an Element Inspector/FireBug/whatever, you'll see the images nested in figure elements in the code and that it's way off to the left behind the sidebar. In the Rules viewer, it's showing a margin-left: -168px on classes ".full-width .site-content .wp-caption.alignleft"
I added my own class to the images to try to offset the margin by using margin-right: 168px, but it's not having an effect, presumably because the -168 left margin setting is on an element that is a parent of the image.
I don't want to select all figure elements to offset that -168px - I may want that for other figures - I don't know. WP adds an ID to each image, but I don't want to have to select each and every image ID (unless that's the only way), so how do I handle this?
Thanks for anyone's help.
Remove the .alignleft class from the figure's html.
This will remove the margin.
To get the text to flow around the figure you need to give it a property of float: left and add some right and left margin to make it look a bit nicer.
html for the figure (your image) should read:
<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption">
I'd say you should look at styling elements in css stylesheets as opposed to defining your styles in html.
A book for you would be:
HTML & CSS: Design and Build Web Sites
By Jon Duckett
Its what I used when I first started CSS. Its got all you'll most likely need for a while and very beginner friendly...
After some more fiddling around looking at the CSS and trying some settings I realized that I kind of answered my own question. I said that the figure element that the image is in has a setting of margin-left: -186px;. All I had to do was add my own CSS: figure { margin-left: 0px; }. Why I didn't see that sooner, I don't know...
I am building a website using a template, which have an stylesheet but it keeps interfering with things I add like Google Maps or other custom things in my website. How can I make the tag
<div id="map_canvas"></div>
not inherit any styles from the stylesheet, so it would only have a height and width.
I am forced to put it at the very end of the document, then use margin-top: -400px and margin-left: 350px to position it.
Try not inheriting this page from the main page where all other CSS are loaded.
Load only CSS file, that you want to apply it to this page.
Use a class on top of your div. For example, if you have a div for google maps the css that you need would look like:
#map_canvas.classNameHere{
position:absolute;
height: whatever you want;
left: whatever you want
width:whatever you want;
}
You define the div, then put .classNameHere or whatever you want the class name to be. Then, in the html, you would tell the stylesheet that this div is part of that class.
<div id="map_canvas" class="classNameHere">
that way, this div will only take the attributes from the defined div in the stylesheet with .classNameHere after the name of the div. If this didn't answer your question, or I misinterpreted it, let me know. Your question is a little bit ambiguous. I don't really know what you already have or what exactly is interfering with it. If it is another div with the same name, then this will probably work. If it is a stylesheet that is constant throughout the whole website, then you really should have a stylesheet for each page, but it will work as long as you make the div with the class a completely new div for each page, so you will have say 4 definitions of the div, each with a different class name. If it is an overall definition such as
*{stuff here;}
then I forget if the class will help. It may just be safer overall to take what is in the
*{stuff here;}
and add it to each div that you want individually.
If you need more help about classes, check out http://thenewboston.org/watch.php?cat=43&number=5 It's a tutorial on this from thenewboston.org. If you need to, start with the beginning of the videos it's only a couple into this set. (It's in the HTML5 tutorials)
If you're having problems positioning it where you want it, you may want to try to put it inside another div. For example, if you wanted it in the sidebar, you would have this CSS for the sidebar
#sidebar{
position:absolute;
left:70%;
top:20%;
}
and the same CSS above for your div, then your HTML would look like this.
<div id="sidebar">
sidebar content here
<div id="map_canvas" class="classNameHere">
any code you need for google maps here.
</div>
</div>
2 more things. First, you should use percentages instead of pixels, so that it will fit on any size screen, unless you're padding the website on each side so that it is all centered. Also, I read your bio on your profile and I'm in the same boat as you. I'm just teenager who likes to code, and we all get confused, so if you need me to explain it more, or I misunderstood your question, let me know.
My site's main stylesheet has the div elements arranged in a very particular order. In my print stylesheet, I wish to rearrange the order of my div elements using purely CSS. How can I do this?
Presume these to be divs in my main stylesheet:
a d
b e
c f
I want it to look like this on my print stylesheet (I remove non-printer friendly divs):
a
f
c
d
You can remove the unwanted divs and stack the remaining divs like this...
http://jsfiddle.net/ywTJy/2/
div {
width: 50%;
background-color: #ccc;
float: left;
}
/* print CSS */
div {
float: none;
width: 100%;
}
#b, #e {
display: none;
}
I'm not sure if you intentionally want to move the "F" div to the 2nd position but it seems awkward if you would order your content one way for the Web and re-order it for print.
Depends on exactly how you "want" to position them, and there are many ways to use CSS. The most barebones basic way to move a div all around the page would be using position: absolute and adjusting top/left/etc CSS properties accordingly. I think it should still work with print fine.
Mind you, I wouldn't rely "solely" on absolutely positioned items to design a webpage, but that's one way.
If the content is flowed and/or dynamic you're going to have problems. If you can reliably know where the items will be in relation to each other you can do things like:
<div style="width:100px;position:relative;left:100px">
<div style="width:100px;position:relative;left:-100px">
Which would swap the visual position of two side-by-side divs.
In general, no: you cannot cause position:static items (the default) to flow in a different order. CSS change change the presentation of elements, but there is a fuzzy line between what is semantic in your content and what is the presentation. Just as one sentence and paragraph logically follows the other, you cannot use CSS to change the meaning of the content.
I'm giving new life to a boring web page. Please see what my template should look like here: Correct body page
Pretty page!
Now - when I go to add my existing background / menu/ footer - I am somehow loosing my container image -
/* structure */
.container {
background: url(/img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 702px;
position:relative;
}
I removed position:relative; (but it still failed). Please note I'm having to use a web content manager only because I have no other access to site. For this reason - my css sheet is in the middle of the page.
This is how the page looks now w/missing bgcontainer.gif:
Current page
Please help - thank you
With the help of firebug I can see that the html structure of the two pages is quite different. On the "good" one you have a ".container" div as a wrapper of most of the content, you can see it here with the black border:
But on the "wrong" one you have a "#container" div in the same position and another ".container" div further down, nested inside that "#container", and it wraps that header only.
The "#container" div of the "wrong" page spans the whole witdh.
By the way, I like your design.
EDIT:
This is the look of the page with float: left; and left:107px; added to the ".container" div.
Here's your biggest problem:
The structure of the HTML pages is MUCH too different to pin this problem on one single line of code. In the "old" page there are 5 stylesheets including your own; in the "new" page there is only one stylesheet.
The reason your old and new pages don't look the same when you add your default.css stylesheet is because the old page has FOUR other stylesheets also applying styles, many of which are overriding your own.
This website http://www.elkaniho.com/ has a CSS layout which is what i want, you see, the divs stack on top of each other, not on a precise grid, but just at the bottom and on the side.
And when you re-size the browser, they all re-adjust perfectly?
anyone know how i can get the same layout like at elkaniho.com or what type of layout this is called?
There is also a neat jQuery plugin called Masonry that can deal with div's of varying width and stacks them up as tightly as possible. Depends on your content.
That's just a six column layout. Easily done with 6 divs:
<div id="container">
<div class="column">one</div>
...
<div class="column">six</div>
</div>
As a fluid layout:
#container { overflow: auto; }
div.column { width: 16%; float: left; }
You can of course fix the widths too.
Each column then has several divs which do what divs (and in fact any block element) do: they stack top to bottom.
The effect you are speaking of is created using javascript. If you look at the source code, you will find a link to a javascript file called funciones.js which includes functions called cajas and cajasInterior that are responsible for this effect. Also note that they are using jQuery.
The functions:
Figures out the maximum number of columns based on the body width, box width and margin
Sets all divs with a class of box and boxInterior to have absolute positions and set their width
Goes through each box and calculate the left and top positions.
I would contact the webmaster of the site and ask permission to use this script and change it to fit your needs.