Ok, I want my home page to have a structure like the below picture
-The 1st block of info is just 1 "text line"
-The 2nd block of info is the "Wellcome Text" (there're many text lines in here)
-The 3rd block of info is the "Note Text" (there're some text lines in here)
-The 4th block of info is for holding a few widgets such as buttons, icon...
So, I decided to use Div. It works fine for the 1st, 2nd & 4th but I don't know how to position the 3rd.
.aTextLine
{
position:relative;
left:500px;
top:32px;
text-align:right;
width:420px;
}
.wellcomeText
{
position:relative;
left:200px;
top:50px;
text-align:left;
width:720px;
}
.widgetSection
{
position:relative;
left:200px;
top:60px;
text-align:left;
width:720px;
}
.noteText
{
position:relative;
left:230px;
top:60px;
text-align:left;
width:100px;
}
If i obmitted the noteText then it look like the picture but without the note section, so :
How to change the CSS .noteText so that it will look like the above picture
The home page is like this
<html>
<div class="{style.aTextLine}" > ...1 text line</div>
<div class="{style.wellcomeText}" > many text lines....
.....
...</div>
<div class="{style.widgetSection}" > <g:Button...> <img...> </div>
</html>
Check this
I assumed your html as designed in the fiidle. so modified only few css. If you want that design alone, i can overwrite the whole code in best manner.
.div1
{
position:relative;
left: 100px;
text-align: right;
top:32px;
width:420px;
border: 1px solid;
}
.div2
{
position:relative;
left:80px;
top:50px;
text-align:left;
width:500px;
border: 1px solid;
height: 100px;
float: left;
}
.div3
{
position:absolute;
width:100px;
left: 600px;
top: 80px;
border: 1px solid;
height: 100px;
}
.div4
{
position:relative;
left:80px;
top:60px;
text-align:left;
width:500px;
clear: both;
border: 1px solid;
}
Let me know if any problem occurs or requirement changes. I ll edit it.
EDITED FIDDLE
It ll not cause any problem..
To create WHOLE div for WELCOME and NOTE div after that split two separate div and use float:left float:right
like this DEMO
HTML
<div class="main">
<div class="header">1 text line</div>
<div class="container">
<div class="welcome">The 2nd block of info is the "Wellcome Text" (there're many text lines in here)......</div>
<div class="note">Note Text"</div>
</div>
<div class="widget">4th block of info is for holding a few widgets such as buttons, icon.</div>
CSS
.main{
width: 1300px;
margin: 0px auto;
}
.header{
width: 100%;
height: 50px;
background-color: #ffff00;
text-align: center;
font-size: 2em;
}
.container{
width: 100%;
height: 500px;
}
.welcome{
width: 75%;
height: 100%;
float: left;
background-color: #d3d3d3;
}
.note{
width: 25%;
height: 100%;
float: right;
background-color: #87cefa;
}
.widget{
width: 100%;
height: 75px;
background-color: #0cbadf;
}
See for .note text you have kept kept left = 230px and 100 px width ,so totally u need 200 + 720 + 230 +100px =1250px which is too much. Probabaly reduce it to something like this :
.welcomeText
{
position: relative;
float: left;
left: 100px;
top: 60px;
text-align: left;
width: 480px;
}
.noteText
{
position: relative;
float: right;
left: 0px;
top: 60px;
text-align: left;
width: 100px;
}
Alternatively you could put both wellcome and note text in one div and use percentage width; something like this
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 75%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
For html
<section>
<div class="one">
<div>1</div>
<div>2</div>
<div>4</div>
</div>
<div class="two">
</div>
</section>
you could do like this perhaps 1,2,4 in one column and then note in rest ..so all those column will have 75% and ur note 3rd div will have rest of 25%
Related
Problem is about , it works great on desktop but on mobile fails....
[http://jsfiddle.net/9vv914uL/][1]
i want to make this divider responsive... because it is working very well on higher resolutions , as you can see....
and bonus is to make words inside tag in different colors...
this is css stylesheet:
.divider {
text-align:center;
font-family: 'montserrat';
}
.divider hr {
margin-left:auto;
margin-right:auto;
width:40%;
}
.left {
float:left;
}
.right {
float:right;
}
this is
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>BLUE RED<hr class="right" style="margin-top:12px;"/>
</div>
I dont know what to say about this problem, this is just plain text. I must go back to the stars <3
:)
There are other ways that this can be handled that would work better for what you are trying to do. In my example, I am using both a heading element and an empty div. The text in the heading element can be expanded as much as you would like without needing to worry about available space, and the solution is responsive out of the box.
HTML
<h3 class="divider">
<span>Title</span>
</h3>
<div class="divider">
<span></span>
</div>
CSS
.divider {
border-color: #000;
border-style: solid;
border-width: 0 0 1px;
height: 10px;
line-height: 20px;
text-align:center;
overflow: visable;
}
.divider span {
background-color: #FFF;
display: inline-block;
padding: 0 10px;
min-height: 20px;
min-width: 10%;
}
Fiddle: http://jsfiddle.net/6uux0cbn/1/
I'd probably do it like this rather than messing with floats:
.divider {
text-align: center;
}
.divider:after {
content: "";
height: 1px;
background: #000;
display: block;
position: relative;
top: -8px; /* this value depends on the font size */
}
.divider > span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 1;
}
<div class="divider"><span>BLUE RED</span></div>
HTML:
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>
<div class="title">BLUE RED</div>
</div>
CSS:
.divider {
text-align:center;
font-family: 'montserrat';
position:relative;
height: 68px;
}
.div hr {
width:100%;
position: absolute;
z-index: 888;
}
.title {
position: absolute;
left:50%;
width:100px;
margin-left: -50px;
z-index: 9999;
top:15px;
background: white;
}
Super weird: For some reason, my site's front page layout (CSS) shifts to the right on a mobile device when it's supposed to be centered? See: http://www.stylerepublicmagazine.com
Does anyone know why this is? I've seen this error on other forums, but no one seems to have a solid fix for it.
Here's the main portion of the stylesheet for my template:
#wrapper {
position:absolute;
width:100%;
margin: 0, auto;
margin-top:60px;
}
#socialmedia {
float:right;
}
#topbanner {
margin-left:180px;
width:990px;
}
#magnavigation {
position:absolute;
margin-top:150px;
margin-left:150px;
}
#featureslides {
position:absolute;
margin-top:240px;
margin-left:190px;
width:1000px;
}
div.img
{
padding-top:40px;
margin: 0px;
height: 150px;
width: 150px;
float: left;
text-align: left;
vertical-align:top;
padding-right:62px;
}
div.imglast
{
padding-top:40px;
margin: 0px;
height: 150px;
width: 150px;
float: left;
text-align: left;
vertical-align:top;
}
div.img img
{
display: inline;
margin: 3px;
}
div.articlename {
padding-top:5px;
font-family:'Oswald', sans-serif;
font-size:1.4em;
}
div.desc
{
padding-top:5px;
text-align: left;
font-family:helvetica;
font-size:1em;
font-weight: normal;
width: 140px;
margin: 0px;
padding-bottom:100px;
}
#morefeatures {
margin-top:180px;
float:left;
width:685px;
padding-right:15px;
padding-bottom:20px;
}
#adverts {
width:300px;
float:right;
margin-top:180px;
}
.FrontHeading {
font-family: 'Oswald', sans-serif;
font-size:30px;
padding-bottom:5px;
}
Thanks,
B
You're declaring a lot of margin-left properties which causes the elements to shift to the right.
Before and after removing the margins on the left.
As some others pointed out, you're simply using too many position: absolute properties in your CSS and basically, you've tuned your layout for one resolution (1440 wide). For example, on my resolution of 1920x1080, your layout appears on the left.
You can fix this by removing all position: absolute properties and using substitutes. For example, for the main column, you should be using margin: 0 auto, which will center it.
I've created an example of a layout you can use, to get an idea of the various types of positioning you'll want to use for your layout. I essentially duplicated the layout (more or less) using different properties that should scale across resolutions and devices.
The Fiddle
HTML
<div id='wrapper'>
<div id='banner'>
Your logo
<div id='social'>FACEBOOK | TWITTER</div>
</div>
<div id='slides'><img src='http://placekitten.com/500/200'/></div>
<div class='news'>News item 1</div>
<div class='news'>News item 2</div>
<div class='news'>News item 3</div>
<div class='news'>News item 4</div>
<div class='news last'>News item 5</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div style='clear: both'></div>
</div>
CSS
#wrapper {
width: 500px;
margin: 0 auto;
font: 18px sans-serif;
}
#banner {
background: #8888ff;
padding: 20px;
margin-bottom: 5px;
}
#social {
float: right;
margin-top: -10px;
font-size: 50%;
}
#slides {
margin-bottom: 5px;
}
.news {
background: #88ff88;
display: inline-block;
*display: inline; /* IE8- hack */
zoom: 1; /* IE8- hack */
margin-right: 10px;
width: 78px;
text-align: center;
padding: 5px;
}
.news.last {
margin-right: 0;
}
.blog {
margin-top: 8px;
clear: both;
}
.blog .entryimg {
float: left;
margin-right: 10px;
}
Result
Too much position absolute for the CSS I think.
Change these few CSS for content to center.
#wrapper {
width: 100%;
margin: 0 auto;
margin-top: 60px;
}
#topbanner {
margin-left: 180px;
width: 990px;
margin: 0 auto;
}
#magnavigation {
margin-top: 150px;
margin-left: 150px;
margin: 0 auto;
}
#featureslides {
margin-top: 240px;
margin-left: 190px;
width: 1000px;
margin: 0 auto;
}
I suggest you to reconstruct your section as it's quite a mess and hard to control from what I saw.
Continuing my last question on this thread (Play button centred with different image/video sizes), I will open this one regarding to #Marc Audet request.
Basically I had this code:
.playBT{
width: 50px;
height: 50px;
position: absolute;
z-index: 999;
top: 25%;
left: 25%;
margin-left: -25px;
margin-top: -25px;
}
However I can't use the example given by Marc on the last thread, because the play button doesn't work as expected when the video size changes...
Here is the code
You need to tweak your HTML a bit, here is one way of doing it:
<div id="video-panel">
<div id="video-container" class="video-js-box">
<div id="play" class="playBT"><img class="imgBT" src="http://2.bp.blogspot.com/-RnPjQOr3PSw/Teflrf1dTaI/AAAAAAAAAbc/zQbRMLQmUAY/s1600/player_play.png" /></div>
<video id="video1">
<source src="http://video-js.zencoder.com/oceans-clip.mp4"/>
</video>
</div>
<div id="video-controls">
<div id="footerplay"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/play.png" /></div>
<div id="footerpause"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/pause.png" /></div>
<div id="progressbar">
<div id="chart"></div>
<div id="seeker"></div>
</div>
</div>
</div>
and the CSS is as follows:
#video-panel {
border: 4px solid blue;
padding: 4px 50px;
}
.video-js-box {
width: auto;
height: auto;
outline: 1px dotted blue;
position: relative;
display: block;
}
video {
outline: 1px dotted blue;
margin: 0 auto;
display: block;
}
#play {
position:absolute;
top: 50%;
left: 50%;
outline: 1px dotted red;
}
.imgBT{
width:50px;
height:50px;
vertical-align: bottom;
margin-left: -25px;
margin-top: -25px;
}
#video-controls {
outline: 1px solid red;
overflow: auto;
}
#footerplay {
float: left;
margin-left: 27px;
}
#footerpause {
float: left;
margin-left: 27px;
}
#progressbar {
float: left;
outline: 1px dotted black;
display: inline-block;
width: 200px;
height: 27px;
margin-left: 27px;
}
#footerplay img, #footerpause img{
height:27px;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/EnDHw/
Explanation & Details
User a wrapper div to keep everything tidy, video-panel, and use a separate div for the video video-container and for the controls video-controls.
The play button and the <video> element are positioned with respect to the video-container and note the negative margin trick to position the arrow button image.
The control elements can be positioned in their own div video-controls. I simply floated them to the left with a 27px left margin.
This should help you get started. The outlines and borders are for illustration only and are optional.
Good luck!
Here is my stylesheet code
#topwrapper {
background: url(images/orangebg.jpg) repeat-x top;
height: 502px;
}
#mainwrapper {
background:url(images/bluebg.jpg) repeat;
}
#maincontent {
margin: 0 auto;
width: 961px;
background-color:#F0EFEF;
position: relative;
margin-top: -312px;
}
I want the maincontent div to move up into the orange div but it is bringing the bluebg.jpg with it (cutting short the orangebg.jpg). When I tried using -top: 312px; instead of the negative margin it added space below the #maincontent.
The code on the page reads
<div id="topwrapper"></div>
<div id="mainwrapper"><div id="maincontent">test test</div></div>
View on jsfiddle
jsfiddle.net/bdh2a - remove the margin-top: -312px; and that is how I need the orange background to look with the grey box on top of it
maybe you can set margin-top: -312px; to mainwrapper div?
Re-arrange your html like this:
<div id="mainwrapper">
<div id="maincontent"><p>text text</p></div>
<div id="topwrapper"></div>
</div>
Then use this CSS setup (adjusting the heights and stuff of course):
#mainwrapper{
height:100%;
background-color:#FF4200;
width:100%;
}
#topwrapper {
background-color:#1B00FF;
height:100px;
min-width:100%;
margin:0 auto;
position:absolute;
top:0;
z-index:0;
}
#maincontent {
margin: 0 auto;
padding:20px;
top:20px;
background-color:#ccc;
position: relative;
color:#000;
z-index:1;
width:80%
}
Check out this jsfiddle:http://jsfiddle.net/imakeitpretty/yqnfk/
There is a lot of greek text in there because you can't see the orange expand without it. "text text" isn't enough to do it.
I Found a solution!!
#topwrapper {
background: url(images/orangebg.jpg) repeat-x top;
height: 502px;
}
#mainwrapper {
background:url(images/bluebg.jpg) repeat;
float: left;
width: 100%;
display: block;
position: relative;
}
#maincontent {
width: 961px;
background-color:#F0EFEF;
position: relative;
margin-top: -312px;
margin-left: -480px;
position: relative;
float: left;
left: 50%;
}
The code on the page stays the same
I'm using relative widths:
<style>
#ldiv {
height: 400px;
width: 75%;
background-color:#fff;
color:#ccc;
border: 1px solid #F2F2F2;
float: left;
}
#rdiv {
vertical-align: top;
float: left;
width: 25%;
}
</style>
<div>
<div id="ldiv">Left</div>
<div id="rdiv">Right</div>
</div>
With this code, #rdiv doesn't stay beside #ldiv.
If I use margin-right: -2px; in #ldiv, the two divs stay side by side, but overlap slightly.
I know the problem is caused by the border, but how can I make it fit?
write like this:
#ldiv {
height: 400px;
background-color:#fff;
color:#ccc;
border: 1px solid #F2F2F2;
overflow:hidden;
}
#rdiv {
vertical-align: top;
float: right;
width: 25%;
}
HTML
<div>
<div id="rdiv">Right</div>
<div id="ldiv">Left</div>
</div>
Check this http://jsfiddle.net/aYteE/
OR
You can use box-sizing property for this.
Check this http://jsfiddle.net/aYteE/2/
use a super div and position the inner divs with position:relative and float:left. Avoid giving width to the second div because border will make it go over "100%".
#container {
width:100%;
}
#ldiv {
height: 400px;
width: 75%;
position:relative;
float:left;
background-color:#fff;
color:#ccc;
border: 1px solid #F2F2F2;
float: left;
}
#rdiv {
vertical-align: top;
position:relative;
float:left;
}
<div id="container">
<div id="ldiv">Left</div>
<div id="rdiv">Right</div>
</div>
Hi I did small changes thats it. Friend please check it.
ldiv {
float:left;
height: 400px;
width: 75%;
background-color:#545149;
color:#ccc;
border: 1px solid #F2F2F2;}
rdiv {
float:left;
padding:10px 10px 10px 10px;
}