I'm trying to make some tabs for a search bar, by using 2 images, inside 2 seperate divs, but for some reason it will only show one image. One or the other. If I comment out the home-searchbar-school id from the css, the professor tab shows, otherwise only the school will show, and it shows up where the professor tab should be. When I look to see where the divs are in google chrome's dev helper, it shows them in the right spot, so Im kind of stumped.
Here's the HTML:
<div id="home-searchbar">
<div id="home-searchbar-tabs">
<div id="home-searchbar-professor" class="home-searchbar-tab">
</div>
<div id="home-searchbar-school" class="home-searchbar-tab">
</div>
</div>
<div id="home-searchbar-container">
</div>
</div>
and the CSS:
#home-searchbar{
margin-left: 20px;
float: left;
height: 115px;
width: 980px;
background-color: green;
}
#home-searchbar-tabs{
float: left;
width: 980px;
height: 32px;
background-color: red;
}
.home-searchbar-tab{
background-color: yellow;
width: 190px;
height: 32px;
float: left;
}
#home-searchbar-professor{
background: url('../img/searchtabs.png') 0 0 no-repeat;
}
#home-searchbar-professor{
background: url('../img/searchtabsinactive.png') 0 -64px no-repeat;
}
#home-searchbar-container{
float: left;
width: 980px;
height: 83px;
background-color: purple;
}
the images are sprites, those are working correctly so I'll only upload one of them.
The other image is the same just different color scheme.
Also a random little question, is that good style for having a class and id in the divs? I'm still learning about CSS so was wondering if that was the correct way/optimal way to use both in a div?
Thanks a lot for any help or advice you can give!
Ok here is the answer:
"both background css uses the same id, #home-searchbar-professor"
ty the rep, and ur css is ok btw
#home-searchbar-professor{
background: url('../img/searchtabs.png') 0 0 no-repeat;
}
#home-searchbar-professor{
background: url('../img/searchtabsinactive.png') 0 -64px no-repeat;
}
both are called home-searchbar-professor, so rename one to home-searchbar-school
Related
I am a newbie to both html and css and for the life of me I cannot get this right. Can someone please assist me in coding this?
This is what I have done so far, but now I'm stuck and my image is not showing up at all..
<div class="image"></div>
<div id="box1">
<h2>Welcome to the home of</h2>
<h1>Oliver & Sons</h1>
<p title="Oliver & Sons - Exquisite Carpentry">
In my workshop patience, skill and immaculate precision are combined to produce items that is unique, of exquisite taste and quality and could very well be a heirloom in your family. Explore my gallery and contact me when you are ready to experience craftsmanship at it’s best.
</p>
</div>
#box1 {
width: 100%;
padding: 100%px;
border: 2px solid navy;
margin: 0px;
background-colour: white;
}
div.image {
background: url(Images/background.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
There are a several wrong things here:
When you set any CSS property like padding you should only use one kind of messure: px, %, em, rem... But not two, as you do in #box1. This is an error.
This is matter of style. When you set a property to 0 is better not set px, nor any kind of messurement units.
Now, your goal.
You want to get your #box1 inside of your .image so you should put one tag inside of another, as you could see on my code. Doing that you will be very close to your solution.
Next thing is centering you #box1. There are a lot of ways to do that, I put here my favourite, but, as always, the best way depends on the situation.
#box1 {
width: 50%;
border: 2px solid navy;
margin: 0 auto;
color: #FFF;
background: navy;
opacity: 0.8;
border-radius: 5px
}
div.image {
padding: 20px;
background: url(http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div class="image">
<div id="box1">
<h2>Welcome to the home of</h2>
<h1>Oliver & Sons</h1>
<p title="Oliver & Sons - Exquisite Carpentry">
In my workshop patience, skill and immaculate precision are combined to produce items that is unique, of exquisite taste and quality and could very well be a heirloom in your family. Explore my gallery and contact me when you are ready to experience craftsmanship
at it’s best.
</p>
</div>
</div>
Looks like the outer container will be a background image, then you will have another container to hold the text which will could use the the background-color: RGBA property.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
background: url(link/to/image) center center;
background-size: cover;
// Use prefixes
}
.inner-container {
background-color: rgba(255, 255, 255, 0.6);
color: #000;
width: 500px;
margin: 60px auto;
}
Please make sure you explain as much as possible in your example code, SO isn't here to code for you :)
Here is a pretty useful link explaining RBGA
https://css-tricks.com/rgba-browser-support/
I'm creating a website for a client - I have yet never experienced problems that I could not fix, but after 3 hours of trying and searching, I decided to ask here.
So, I have made a mockup in Photoshop.
Desired design
The grid is my main content/center of the page, but I want to have the header only fit from left (0px) to the end of my grid container, and also have a "tip" at the end (the arrow)
I decided to use a 1x99px background for the whole background and the actual image for the tip, mainly to avoid spending too much data on the image (as the page will contain tons of images)
I have given it a shot, and did some HTML/CSS, but it either ended in a wrong layout (the header grid-container being wrongfully placed), shadows overlaying or the tip exceeding the grid-container.
My header:
<div class="header_bg"></div>
<header>
<div class="header-content">
<div class="grid-container">
asdads
<div class="header_arrow"></div>
</div>
</div>
</header>
My CSS:
header {
height: 99px;
overflow: hidden;
width: calc(50% + 50%);
position: relative;
}
.header_arrow {
background: url(images/header_arrow.png) no-repeat;
width: 144px;
height: 99px;
float: right;
margin-right: -156px;
}
.header_bg {
background: url(images/header_bg.png) repeat-x;
height: 99px;
position: absolute;
width: 50%;
}
header .grid-container {
height: 99px;
background: url(images/header_bg.png) repeat-x;
}
How it appears:
Current design
With the red boxes being grid-container
It's almost what I'm looking for, but I want the end/tip to be inside the grid-container and the shadows to stop overlaying.
Any ideas? Thanks you so much!
You could give the .grid-container a right margin equal to the width of the .header_arrow, and make the right margin of that equal to its width
header .grid-container {
height: 99px;
background: url(images/header_bg.png) repeat-x;
margin-right:144px;
}
.header_arrow {
background: url(images/header_arrow.png) no-repeat;
width: 144px;
height: 99px;
float: right;
margin-right: -144px;
}
im making a self financial accounting program but im gonna use html,css and php to do it
i have a basic layout with 5 main divs on the front page
here it is the mock:
http://s24.postimage.org/le9yrx4np/divs.jpg
i never coded before and im failing hard
i want this layout compatible with "desktops" this is my desktop version
im working based on a 1024 x 768 screen
but i want webkits compatible for all browsers because i want this able to resize if its a little bigger or smaller
im not sure if need em since i can just set things to like 100% but thats where my problem starts
here is my work so far
http://jsfiddle.net/dhJPS/
my prblems are
the middle three divs are being overlapped by the right div, notice on the words how they are not centered from the left div to the right div
i cant seem to understand the concept of floating to well i cant make this layout work like i want
anyways if you can help me out a little with this one is greatly appreciated!!
thanks
#leftside {
background-color: blue;
width: 170px;
height: 770px;
float: left;
}
#intab {
background-color: yellow;
width: 100%;
height: 297px;
}
#currentday {
background-color: white;
width: 100%;
height: 170px;
}
#outtab {
background-color: yellow;
width: 100%;
height: 297px;
}
#rightside {
background-color: black;
height: 770px;
width: 200px;
float: right;
margin-top: -765px;
}
* {
margin: 0px;
padding: 0px;
list-style-type: none;
}
body {
text-align: center;
display: block;
}
img {
border: none;
}
You simply need to rearrange some things.
When floating something to the right, the HTML always need to come before any other HTML. Right, left, static is the best order to follow.
You always want to cascade your CSS. Put global styles at the top of the style sheet. The body styles should be at the top of your CSS, not the bottom.
I added a wrapper div to set a minimum width. This way the interior content will never go below that width, ensuring things never overlap. However they will expand as much as needed.
It is rare you need to set width: 100%; in the CSS. It's not always a bad thing, but you shouldn't bother setting that unless you specifically know you need it.
I rearranged some things, and removed some of the HTML that jsFiddle don't need.... UPDATED FIDDLE HERE
Here is your answer.
Key issues:
margin
inner div to group all the central ones
[VERY IMPORTANT] display: inline-block; - This will make sure that your div will be the exact size you defined. if not used it will use 100% for both width and height
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.panels {
height: 768px;
}
.rightside, .leftside {
width: 170px;
height: 100%;
background-color: yellow;
display: inline-block;
}
.leftside {
float: left;
}
.rightside {
float: right;
}
.innerPanels {
height: 100%;
margin: 0 170px;
}
.intab, .outtab {
height: 25%;
background-color: lime;
opacity: 0.75;
}
.currentday{
height: 50%;
background-color: darkgray;
}
</style>
</head>
<body>
<div class="panels">
<!--LEFT SIDE -->
<div class="leftside">left side</div>
<!-- RIGHT SIDE -->
<div class="rightside">right side</div>
<div class="innerPanels">
<!-- IN -->
<div class="intab">in</div>
<!-- CURRENT DAY -->
<div class="currentday">current day</div>
<!-- OUT -->
<div class="outtab">out</div>
</div>
</div>
</body>
</html>
EDIT: you can view the page here: http://websitem.gazi.edu.tr/test/index.html
I'm trying to do the effect in the screenshot below:
The first one is from Chrome. Firefox show the same. But Internet Explorer from version 7 up to 9 shows the second picture.
My html structure is this:
<div class="header-menu">
<div class="container">
<div class="header-curve"></div>
<div class="header-building"></div>
</div>
</div>
And my css is this (dont bother with LESS specific syntax)
.header-menu {
#gradient > .vertical(#baseColor, #baseColorDark);
height: 82px;
margin-top: 82px;
.header-curve {
background: #baseColor url(/ui/frontend/themes/default/ui/img/header-curve.png) center top no-repeat;
height: 82px;
margin-top: -82px;
width: 1020px;
}
.header-building {
background: url(/ui/frontend/themes/default/ui/img/header-building.png) 20px top no-repeat;
height: 214px;
margin-top: -82px;
width: 1000px;
}
}
how can i solve the problem with IE? i already tried position: relative and zoom:1 fixes.
Thanks.
It looks like the filter style on your .header-menu class is causing it to be hidden in IE, is this necessary?
I think you were on the right track with the position: relative;, but also add a z-index value in there (play with the value until it appears correctly).
I might be missing something, but I still don't understand why you're bothering with the negative margin. The following CSS would do exactly the same, no?
.header-menu {
#gradient > .vertical(#baseColor, #baseColorDark);
.header-curve {
background: #baseColor url(/ui/frontend/themes/default/ui/img/header-curve.png) center top no-repeat;
height: 82px;
width: 1020px;
}
.header-building {
background: url(/ui/frontend/themes/default/ui/img/header-building.png) 20px top no-repeat;
height: 214px;
width: 1000px;
}
}
Edit: fixed. Thanks everyone for the help ;)
Hello everyone,
I'm having a few problems with the blue bar elements being separated instead of being together.
Both elements "Notícias" and the blue bar are inside a div called "content". The blue bar is inside a span, and is created with 3 divs. One for the left image, the middle one is a repeating background and finally the third one with the last image.
Here's an image to ilustrate the problem: http://i52.tinypic.com/b3vhic.png
The code is the following:
.barra .barra-azul {
background: url(outros/barra_sidebar_e.png) no-repeat top left;
display: inline-block;
height: 14px;
width: 7px;
}
.barra .barra-azul-meio {
background: #56a3eb repeat-x;
display: inline-block;
height: 14px;
width: 50%;
}
.barra .barra-azul-fim {
background: url(outros/barra_sidebar_d.png) no-repeat top right;
display: inline-block;
height: 14px;
width: 7px;
}
And the html is:
<span class="barra">
<div class="barra-azul"></div>
<div class="barra-azul-meio"></div>
<div class="barra-azul-fim"></div>
</span>
What is the best way to accomplish this?
Thanks in advance ;)
It's hard to answer without being able to experiment with the actual code and graphics. But you can start with adding the following.
.barra div {
padding: 0;
margin: 0;
}
If it doesn't work it would be great if you could post a link to a demo of bar.
The problem is that they're inline-block elements per your CSS rules and you have whitespace between them in your markup. You should either float them, or position them absolutely.
HTML:
<div class="barra">
<div class="barra-azul"></div>
<div class="barra-azul-meio"></div>
<div class="barra-azul-fim"></div>
</div>
CSS:
.barra > div {
float: left;
height: 14px;
width: 7px;
}
.barra .barra-azul {
background: url(outros/barra_sidebar_e.png) no-repeat top left;
}
.barra .barra-azul-meio {
background: #56a3eb repeat-x;
width: 50%;
}
.barra .barra-azul-fim {
background: url(outros/barra_sidebar_d.png) no-repeat top right;
}
That also cuts out a bunch of duplication you had going on.