I'm designing a website. My monitor's resolution is 1280 x 1024 and I usually use Firefox for developing. This is how it looks and should look. This one is the correct one.
But there's a slight change when viewed in Chrome in the same monitor. Notice the right bottom corner.
Things get even worse when viewed in a another monitor with a different screen resolution. This is my screen at work which's resolution is 1366 x 768.
On Firefox
On Chrome
As you can see, the layout is messed up pretty bad. Below is the code.
HTML
<img id="yellowRing" src="images/about_rings/yellow_ring.png" />
<img id="magentaRing" src="images/about_rings/magenta_ring.png" />
<img id="blueRing" src="images/about_rings/blue_ring.png" />
<div id="aboutCaption">
<p>Our Team</p>
</div>
<div id="team">
<div class="member"><a data-member="one" href="#"><img src="images/team/one_thumbnail.png" /></a></div>
<div class="member"><a data-member="two" href="#"><img src="images/team/two_thumbnail.png" /></a></div>
<div class="member"><a data-member="three" href="#"><img src="images/team/three_thumbnail.png" /></a></div>
<div class="member"><a data-member="four" href="#"><img src="images/team/four_thumbnail.png" /></a></div>
</div>
CSS
#yellowRing {
position:absolute;
left:1200px;
bottom:-1300px;
z-index:2;
}
#magentaRing {
position:absolute;
left:1600px;
bottom:-1100px;
z-index:3;
}
#blueRing {
position:absolute;
left:2160px;
top:500px;
z-index:4;
}
#aboutCaption {
position:absolute;
left:2430px;
top:-50px;
z-index:4;
line-height:2.2em;
}
#aboutCaption p {
font-weight:lighter;
text-align:right;
color:#FFF;
font-size:55px;
}
#team {
position:absolute;
left:2135px;
top:90px;
width:432px;
height:110px;
z-index:4;
}
.member {
position:relative;
height:95px;
width:95px;
margin:8px 8px 8px 0px;
z-index:5;
display:inline-block;
}
.member:nth-child(1) {
margin-left:8px;
}
.member img {
height:95px;
width:95px;
}
This website only scrolls horizontally. My question is, why this is happening? And what should I do to make the layout consistent despite the screen size or the resolution? Or do I have to go about the responsive design and include multiple CSS files per benchmark?
Thank you.
To cover all platforms/browsers/etc... you will have to euther use a framework, which gets bulky, or if you're keeping it simple, I would go with some #media rules in order to cover your different layout dimensions. Basics of it can be found at W3 Media Types
Related
I have two divs 1)with the icon 2)with the text related to it.
I want to align them in a line.
<div class="col-lg-4">
<h4>Stunning Layouts</h4>
<div class="one"><i class="fa fa-heart service_icon"></i></div>
<div class="one"><a class="service_para">A website that works perfectly good and give a user warm experience on all mobile and tablet browsers.A website that works perfectly good and give a user warm experience on all mobile and tablet browsers. </a></div>
</div>
and my css is like
.service{
background-color:#fff;
padding:30px 100px;
}
.service_icon{
color:#fff;
background-color:#CE1E47;
padding:20px;
margin-right:10px;
border-radius:50%;
}
.one{
display:inline;
height:100%;
}
but if i write more text it gets written under the icon. i want both of them separated side by side even if i write 100 lines of text.
i hope you get it???
display: table-cell is what you need.
Check this fiddle
update your css -
.one{
display:table-cell;
}
There are several methods, here's one using positioning and padding:
http://codepen.io/anon/pen/RWGQyG
<div class="col-lg-4">
<h4>Stunning Layouts</h4>
<div class="icon-text">
<i class="fa fa-heart service_icon"></i>
<p>A website that works perfectly good and give a user warm experience on all mobile and tablet browsers.A website that works perfectly good and give a user warm experience on all mobile and tablet browsers. A website that works perfectly good and give a user warm experience on all mobile and tablet browsers.A website that works perfectly good and give a user warm experience on all mobile and tablet browsers</p>
</div>
</div>
.icon-text{
position: relative;
padding-left: 50px;
}
.service_icon{
position: absolute;
left: 0;
color:#fff;
background-color:#CE1E47;
padding:20px;
margin-right:10px;
border-radius:50%;
}
Add this css.
.service_icon{
color:#fff;
background-color:#CE1E47;
padding:20px;
margin-right:10px;
border-radius:50%;
display: inline-block;
}
.one{
display:inline;
height:100%;
float: left;
}
.one:first-child{
width: 20%;
}
.one:last-child{width: 80%;}
you can test here http://jsfiddle.net/prakashlaxkar/z6m9zk8m/
I have looked around at google and looked at another question: Page elements moving on window resize and I still cannot find the answer to this. My problem is that when I resize the browser my top div element where my navigation bar is moves messing up how the website looks. Since the CSS has it a certain amount to the right CSS probably updates how the page looks since I am resizing it. How would I keep the elements from moving upon page resizing?
My current code
<div id="top" style="background-image: url(images/Home/space.gif); height: 120px; width: 100%; border: 1px solid black;">
<a href="contact.html">
<img id="buttoncontact" alt="Contact" src="images\Logo\contact.png">
</a>
<a id="plugins" alt="Plugins" href="http://bukkit.org/" target="_blank"> +Bukkit</a>
<img id="bukkiticon" src="images\Logo\bukkit.png">
<a id="twitter" alt="Twitter" href="https://twitter.com/" target="_blank"> +Twitter</a>
<img id="twittericon" src="images\Logo\twitter.png">
<a id="youtube" alt="YouTube" href="https://www.youtube.com/" target="_blank"> +YouTube</a>
<img id="yticon" src="images\Logo\youtube.png">
<img id="td6img" src="images\Logo\TD6.png">
<nav id="navigation">
<a id="navigation-anchor-normal" href="contact.html">
<img src="images\Home\mars.png">
</a>
<a id="navigation-anchor-normal" href="projects.html">
<img src="images\Home\merc.png">
</a>
<a id="navigation-anchor-current" href="home.html">
<img src="images\Home\sun.png">
</a>
<a id="navigation-anchor-normal" href="lessons.html">
<img src="images\Home\nept.png">
</a>
<a id="navigation-anchor-normal" href="donate.html">
<img src="images\Home\jupiter.png">
</a>
</nav>
</div>
CSS
#top
{
background-image: url("images/Home/stars.png");
height: 95px;
border: 1px solid black;
width: 100%;
position: fixed;
top:0;
left:0;
background: rgba(255,255,255,1);
z-index: 100;
-webkit-box-shadow:0px 0px 20px rgba(44,44,44,.3);
}
#buttoncontact
{
float:left;
}
#yticon
{
position:absolute;
right:300px;
}
#youtube
{
text-decoration:none;
position:absolute;
right:225px;
color:red;
}
#twittericon
{
position:absolute;
right:190px;
}
#twitter
{
text-decoration:none;
position:absolute;
right:130px;
color:aqua;
}
#bukkiticon
{
position:absolute;
right:95px;
}
#plugins
{
text-decoration:none;
position:absolute;
right:35px;
color:#FF8000;
}
#navigation
{
text-align:center;
}
#navigation-anchor-normal
{
text-decoration:none;
color:aqua;
display:inline-block;
padding:5px 8px;
}
#navigation-anchor-current
{
text-decoration:none;
color:aqua;
display:inline-block;
padding:5px 8px;
}
The only element that is not moving is the TD6img above the nav. Everything else is moving when I resize the window.
What I want to accomplish is having these elements stay put upon resizing the window and not move with the resizing.
This is only happening to this div element no other div element that I have under it.
What you are trying to do is creating a responsive site.
I highly suggest you to use existing framework for that, and not trying to redo all by your self.
For that, look at twitter bootstrap that is the most robust and efficient jquery / javascript responsive design framework.
If you still want help with your task have a look at this DEMO Not sure if this is what you were looking for but play around with it if you want. Also you can upvote my answer when you get enough rep. I swithed most of your position:absolute to float:right
If you are looking for something easy to use and doesn't require a lot of changes, you can also use the "framework" from here: http://www.responsivegridsystem.com/
It is not too heavy and only gives you what you need to make a site responsive. I am using this for a company.
Twitter bootstrap in my opinion is good but it is heavy and although most classes doesn't get loaded, changing/modifying the code is very hectic.
I am trying to put three h4 elements on the same line, I tried using display:inline-block; on all of them, but that only put two of the elements on the same line, the third one is under them.
Here is my HTML
<h4 id="vbottomcreator"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
<h4 id="vbottomdates" align="center"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>
<h4 id="vbottomdevelopment"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>
The third element is under the rest
CSS
#vbottomdates
{
color:black;
display:inline-block;
margin-left:362px;
}
#vbottomcreator
{
color:black;
margin-left:30px;
display:inline-block;
}
#vbottomdevelopment
{
color:black;
margin-left:1100px;
display:inline-block;
clear:none;
}
QUESTION SOLVED
Try like this: Updated Demo
HTML:
<div class="center">
<h4>...</h4>
<h4>...</h4>
<h4>...</h4>
</div>
CSS:
#vbottomdates {
color:black;
display:block;
float:left;
}
#vbottomcreator {
color:black;
display:inline-block;
}
#vbottomdevelopment {
color:black;
display:block;
float:right;
display:inline-block;
}
.center {
width:100%;
margin:0 auto;
display:inline-block;
text-align:center;
}
Margin value is more for the last id.. Try to reduce the value like this.. all the 3 elements were placed properly
I am wondering why are you using margin-left to place all elements horizontally. You will seriously have to change it in future, as it will enable horizontal scroll if window size is reduced. In other words, your page will never be responsive.
remove all margin-left property and give some width in percentage such that total width of all blocks remains less than 100% width of window.
This will ensure that even if user reduces window size, your elements will be in correct position.
Check DEMO here
HTML
<h4 id="vbottomcreator" class="vbottom"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
<h4 id="vbottomdates" align="center" class="vbottom"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>
<h4 id="vbottomdevelopment" class="vbottom"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>
CSS
#vbottomdates
{
color:black;
display:inline-block;
}
#vbottomcreator
{
color:black;
display:inline-block;
}
#vbottomdevelopment
{
color:black;
display:inline-block;
clear:none;
}
.vbottom {
width : 30%;
}
Reduce the margin left value:
#vbottomdevelopment
{
color:black;
margin-left:500px;
display:inline-block;
clear:none;
}
I am a Beginner Website Developer, I want to make my college's project but stuck at the beginning because my navigation div and small divs in navigation div are not going to transform or transit at once. when i apply transition at one of em with absolute position all (also apply absolute position to other three small divs) the all three of em except first disappears. Code is linked. I want to make navigation just like IMDB's Navigation. (with downside transition and with links and picture at one end.)
-Thank in advance.
HTML CODE:
<body>
<div id="Papadiv">
<header id="Header">
<Div id="Logodiv">
<img src="Images/Logo.jpg" height="100px" width="100px" />
</Div>
<Div id="Titlediv">
<font size="+5" face="Comic Sans MS, cursive">MobilePassion.com</font>
</Div>
</header>
<nav id="Nav1">
<div id="navoption1">
<a href="Index.html">
New Arrivals</a>
</div>
<div id="navoption2">
<a href="Famousmodels.html">
Famous Models</a>
</div>
<div id="navoption3">
<a href="Whoweare.html">
Who We Are?</a>
</div>
<div id="navoption4">
<a href="Contactus.html">
Contact Us</a>
</div>
</nav>
/* CSS Document */
#Nav1
{
background-color: #FDAA2F;
height:50px;
width:800px;
}
#navoption1
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption2
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption3
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption4
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
#navoption1:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink;
background-image:url(Rose%20(1).jpg)
}
#navoption2:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
#navoption3:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
#navoption4:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
I think first off you need to do some research on how to build a "CSS Mega Drop Down Menu". (That's usually what they are called and you should be able to find a good example in which you can structure your styling off of.)
A "classic" drop down menu usually contains lists nested (or in your case - divs) within parent list items.
"Here" is a good step by step example that I think should get you off and running.
I have been rtying to find a good resource for an example. These are good examples to learn from i think. http://code-tricks.com/simple-css-drop-down-menu/ , http://css-tricks.com/simple-jquery-dropdowns/ . It would also be wise for user experience to use hoverintent (http://cherne.net/brian/resources/jquery.hoverIntent.html) or a delay. This creates a better user experience.
I've been using the new CSS border-radius function for a while now, but I'm stumped today! I have a background image (120px x 60px) and have set a border radius of 5px, but it's only rounding the top two corners?!
The CSS code I'm using is here:
#buttonRow {
position:relative;
width:980px;
height:60px;
margin-left:51px;
margin-bottom:25px;
float:left;
}
#button {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:10px;
border-radius:5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
}
#singleLineButton {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:20px;
border-radius:5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
}
#buttonText {
width:120px;
height:auto;
color:#FFFFFF;
text-align:center;
font-size:16px;
font-family: Adobe Kaiti Std R;
}
And the output is this:
Why is it only showing the top corners as rounded?!
Any help would be greatly appreciated!
Thanks, Zulu
EDIT
Here is the HTML for those asking:
<div id="buttonRow">
<a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php">
<div id="button"><div id="buttonText">Individual Table Management</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php">
<div id="singleLineButton"><div id="buttonText">Attendance</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php">
<div id="singleLineButton"><div id="buttonText">School Members</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php">
<div id="singleLineButton"><div id="buttonText">Search</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php">
<div id="singleLineButton"><div id="buttonText">School Details</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php">
<div id="singleLineButton"><div id="buttonText">Users</div></div>
</a>
</div>
It might be that your image isn't long enough and thus you don't see the rounded corners on the bottom. I ran into that today, actually.
I simply set a background color and it showed me what the issue was. So, just modify your CSS to:
background-image: #00ff00 url('../assets/buttons/generic_button.png');
or:
background-color: #00ff00; /* bright green for contrast */
background-image: url('../assets/buttons/generic_button.png');
That will at least tell you if your image covers the whole area or not and you will know what to do from there.
In CSS3 it's done like this:
border-top-right-radius: 8px;
border-top-left-radius: 8px
Most likely the bottoms are getting cut off from overflow. Make sure the containing element is tall enough to accomodate the heights of these or set the all the ancestor's overflow to overflow: visible.
Also, use jsfiddle.net to post live examples instead of just the CSS in a vacuum. CSS requires context.
As previously answered, your image isn't large enough. Your div is 120x60px to match your image, but you have a padding-top of 10px, which extends the size of the div to 120x70px total--too large to show the rounding. Either change the size of your background image or resize the div to 50px tall--with padding, it'll end up at the proper size.
You can use this code
#buttonRow {
width: 1170px;
margin: 0 auto;
display: block;
}
#button {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:10px;
border-radius: 5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
background: red;
}
#singleLineButton {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:20px;
border-radius: 5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
background: red;
}
#buttonText {
width:120px;
height:auto;
color:#FFFFFF;
text-align:center;
font-size:16px;
font-family: Adobe Kaiti Std R;
}
<div id="buttonRow">
<a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php">
<div id="button"><div id="buttonText">Individual Table Management</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php">
<div id="singleLineButton"><div id="buttonText">Attendance</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php">
<div id="singleLineButton"><div id="buttonText">School Members</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php">
<div id="singleLineButton"><div id="buttonText">Search</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php">
<div id="singleLineButton"><div id="buttonText">School Details</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php">
<div id="singleLineButton"><div id="buttonText">Users</div></div>
</a>
</div>
Try using margin-top instead of padding top, I've had this issue recently and that seemed to fix it.