I am trying to create this ribbon effect dynamically using an h1:
I have these two images:
and my goal is to stick these on each end of my h1 tag, use the display: inline; property to add dynamic width. Is there any "right way" to do this and make it work cross browser?
For my testing purposes, the ribbon ends are 40px tall, and 18px wide. I am not sure yet what I am going to do about the shadow, but if you guys can just help me figure out how to get this working, I can make it look nice. (hopefully)
For clarification purposes, here is the (non-working) css I have so far:
h1 {
display: inline;
height: 40px;
background-image: url(images/ribbon/left.png), url(images/ribbon/right.png);
background-position: left, right;
padding: 0 18x;
background-color: #ECECEC;
}
The css above causes the #ECECEC color to bleed behind the ends of the ribbon. Any ideas?
Update:
If it helps, here is a screen shot of what my current css is bringing me. This is a little sensationalized to make the result easier to see. I have added a red background instead of the #ECECEC.
First try
overflow: hidden
It could also be a browser issue:
Border Radius = Background Bleed
EDIT:
Have you thought about not using the images all together and just using pure css
http://css-tricks.com/snippets/css/ribbon/
May not look like you wanted but messing around with the css would fix this.
Related
I am new very new to website design. I have just centered my entire website using this on my CSS Style Sheet.
.container {
max-width: 1200px;
margin: 0 auto !important;
float: none !important;
}
I now just have blank white space on both the right and left side columns of the webpage. These columns are not going to be used for navigation or anything like that. I plan on filling them in with a dark grey color. the white space you see at the far left and right side of the screen on this webpage is what i am trying to explain. I want to fill that in to be a dark grey but am not sure how to go about doing that. Also, i have no idea how that code works up there to center my page...but it did=). I am pretty new to html and CSS so i might have a few questions to your answers. This is meant to be a project for school so i do intend to make it look nice. Thanks!
That should be the <body> tag that you need to style:
body {
background-color: #A9A9A9;
}
I have a navbar with a navbar-wrapper class which makes it floating at the top center of the browser. I'd like to have a rectangle zone behind it filled with blue color. How should I do it?
Consider this page http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse
I'd like to add a blue filled area before body and behind the navbar.
UPDATE
I have managed to do something similar to what I wanted by adding an empty jumbotron at the beginning of the body and by setting
.jumbotron{
margin-top:-90px;
background-color:rgb(20,7,91);
}
The problem is that it has rounded corner and the two top corners leave an annoying white space as you can see http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse
Any idea on how to work around it?
UPDATE
It was easy
.jumbotron{
margin-top:-90px;
background-color:rgb(20,7,91);
border-radius:0px;
}
assuming your navbar-wrapper class is 'navbar-wrapper'
.navbar-wrapper {
background-color: blue;
}
or, if like the example you link to
.navbar {
background-color: blue;
}
The basic idea for this might be using z-index. You said, before the body and behind the navbar.
Try this:
body {
// write body font, font-size, color etc
}
Then you can use z-index to make the navbar float over it (But remember, each element always floats over the body, so you don't need this; but still if you want to use it)
.navbar {
z-index: 2; // 2 to make sure, that others stay under it always
background-color: #hexforblue;
padding: 5px 10px; // to make it a rect.
}
After using this, the navbar will have a rectangular div floating behind.
Note: This will be the background for whole of the div, not for just a small portion of it.
I have a problem with the layout I'm creating- problem being that in certain resolutions (or if you zoom in) you can see where the outlining of the div boxes are.
Here's what it's supposed to look like:
Here's what it looks like at some resolutions (or zoomed in):
If you need to see the website, it's here, though obviously it's not finished yet. You might immediately see the problem based on your resolution, if not you could zoom in or change your monitors resolution.
I would imagine this is a common problem with an easy solution. Thanks for your help!
If you change your #righthand to have a float:left, the vertical line at the right disappears.
#righthand {
width: 368px;
height: 373px;
background: url("../img/right.png");
float: right; // CHANGE TO LEFT
}
And if you change your #tp to height:248px, the other horizontal line disappears.
#tp {
width: 1024px;
height: 249px; //CHANGE TO 248px
}
I didn't have enough time to look at the site before it was taken down but I think it could be as simple as setting
background: transparent url(imgsrc) no-repeat left top;
that shorthand for the background image in css will lock in the spot. Other than that I would make sure you have
margin: 0;
padding: 0;
so that you can specify the exact width and make sure the cuts that are made are done to a grid so that when you slice the image you have an exact width.
i want to get the bit at the top of some websites that really thin and right at the top. which looks like facebooks blue banner at the top of their website.
the code i have tried for the above is:
<div style="height:20px; background-color:grey; margin-top:-10px; "></div>
and it works apart from theres just a little bit of white space at the right and left sides of the grey.
Does anyone know what i am doing wrong?
It sounds like you haven't cleared the padding/margin on the body element. Give this a go:
html, body
{
padding: 0px;
margin: 0px;
width: 100%;
}
Also, give your div a width of 100%:
div
{
width: 100%;
}
I've probably gone a bit overboard with the CSS, but it will make sure everything works.
Additionally, make sure there is an HTML doctype defined - this can cause some other problems later one, such as :hover not working.
You need to use margin:0 on the html and body tags. This will allow your div to take up all the available horizontal space, and put it right at the top instead of having a small space.
So, I'm getting married. Hooray!
I'm building a website for the event and HTML/CSS isn't my normal area of expertise.
I've got the site sliced and diced, and most of the important structure laid out in divs.
One thing I'm not sure of though, is that the design calls for an image to spill over both edges of the wrapper. What's the best way to do that in HTML/CSS? Or should I make the wrapper the full image width wide and make another container inside for the other content?
Thanks for your help!
Here's the design comp:
website_comp.jpg
Here's the
image that needs to spill over the
div: ribbon.png
Here's what the
site looks like now:
DierksAndEmster.com
add position:relative and overflow:visible for your #container. Then modify your menu like the following:
#menu {
background: url("http://www.dierksandemster.com/wp/wp-content/themes/et-starter-1-4/images/ribbon.png") repeat scroll 0 0 transparent;
color: black;
display: block;
float: left;
font-family: 'Walter Turncoat',arial,serif;
font-size: 20px;
height: 93px;
left: -71px;
line-height: 22px;
position: absolute;
width: 942px;
}
You could attempt to position the image with position: absolute. Another way could be to use three columns. (~50px wide left column, main area, ~50px wide right column).
You could also take a look how csswizardry has done this, it's a bit advanced though, but might be helpful: http://csswizardry.com/demos/css-powered-ribbons/
Last but not least, if you wan't to be quick and know the navigation panel that has the fancy ribbons never changes place, why not just make a big background image and build the site on top of it? :)