New to the site and fairly new to coding as a whole, but wanting to learn as well.
Basically what im trying to do is essentially make this border grey where the grey box is, and blue for the rest of it. I've tried googling it but struggling to find something that describes exactly what im looking for.
The grey area is 200px wide and starts roughly 26px in from the left side of the page.
Can anyone help at all? Thanks in advance
Border Image
Header code is here - the grey box is part of a logo image.
<div class="fusion-header" style="height: 91px; overflow: visible;">
<div class="fusion-row">
<div class="fusion-logo" data-margin-top="5px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px">
You can override a parent border in the logo element, by using a negative bottom margin with the size of the border.
.header {
background: #515151;
border: 5px solid #5EDBE7;
}
.logo {
width: 200px;
height: 50px;
margin: 50px auto;
background: #5D5D5D;
/* Override the container vorder */
border-bottom: 5px solid #999;
margin-bottom: -5px;
}
<div class="header">
<div class="logo"></div>
</div>
Related
So, here's my situation:
I have a div (see the code below), a pretty simple . When running the code, I come up with a gray box. BUT, my intention was for that gray box to span from the start of the browser window to the END of that browser window, while what the code below does is creating a gray box with what seems to be a white border.
<div style="height: 30px; background-color: gray; color: white;">
Hey
</div>
I'm sorry for the lack of explanation, but I found no good way to word what I was trying to do. Thanks in advance,
Tom.
If you want a div to fill all available space use the following:
width: 100%;
height: 100%;
You can define sizes in percentages of available space.
If you want to keep you height:
<div style="height: 30px; width: 100%; background-color: gray; color: white;">
Hey
</div>
Also to get rid of white borders, add this: body { padding: 0; margin: 0 }
If I understand your correctly, you need width to be set to 100%
<div style="width: 100%; height: 30px; background-color: gray; color: white;">
Hey
</div>
Add width:100%; to say to the div to fill all the horizontal space.
<head>
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div style="height: 30px; width: 100% background-color: gray; color: white;">
Hey
</div>
</body>
I am assuming you want your div to be 30px high and the width all the way. To do that you just set the width of the div to 100% and make sure the body has no padding(this can shift your elements to the the right a little. I recommend using reset.css)
Hope this helps!
I am trying to apply a background-image into a div, it works but i am not able to put it correctly:
I have a space between the top of my div and the top of my background image, it has been reduce a lot by adding a background-position: 0; but it still have a space of many pixels.
I appy a background-repeat: x; (which is apparently the default state), but i have an important space between my images.
How could i solved these issues ?
Here is the html code using bootstrap:
<div class="row-fluid" id="header">
<div id="bar" class="row-fluid">
<div class="span12">
</div>
</div>
</div>
Here is the CSS code:
#bar > .span12{
position: relative;
border-top: 3px solid black;
border-bottom: 3px solid black;
margin-bottom: 10%;
height: 8%;
background-image:url('../img/ban.png');
background-repeat:repeat-x;
background-position:0;
}
Here is the result i get:
Thanks !
Did you tried with background-position:0 !important;? Maybe the property it's getting overwritten.
This image was kind of corrupted, i tried with another one just because i didn't see any solution and it worked, maybe transparant background, i don't know but it came from the image...
Does anyone know how to yellow highlight a field in table and also have the yellow color print? This hightlights on the screen, but does not print the yellow:
<td style="background-color: yellow">Total:</td>
I found out that browsers, by design, do not print background colors. The only workaround I was able to find is that you can make a ultra-thick border of the cell or div:
<td style="border-left: 999px solid yellow">
Unfortunately, the cell contents won't overlay over the thick yellow border. I checked everywhere online and the closest answer I could find was on stack overflow:
Best Ways to Get Around CSS Backgrounds Not Printing
However, the answer was untested and I was unable to get it working on my computer. I tried toying around and experimenting with no luck.
Ok, I found a solution to my problem, but the solution is rather inelegant. Like I said in my above question, you have create a div tag with a big color border on it. The thing is is that colored borders can print correctly. Then, where the highlighted color is displayed, lay another div tag with the text on top. Inelegant, but it works.
It's best to set both the text div and the highlight div's within a third "outer" div for easy placement. the inner divs should be position "absolute" and the outer div should have position "relative". Sample code is below. This is tested code on both Chrome and Firefox:
<style type="text/css">
#outer_box {
position: relative;
border: 2px solid black;
width: 500px;
height:300px;
}
#yellow_highlight {
position: absolute;
width: 0px;
height: 30px;
border-left: 300px;
border-color: yellow;
border-style: solid;
top: 0;
left: 0px
}
#message_text {
position: absolute;
top: 0;
left: 0px;
}
</style>
<body>
<div id="outer_box">
<div id="yellow_highlight"> </div>
<div id="message_text">hello, world!</div>
</div>
</body>
Sorry for the incredibly stupid question, I feel like in most circumstances I could do this easily, but I'm using sharepoint at the moment and trying to do anything in this is hell!
Basically I have a side navigation (.menu-vertical) that is 230px wide, and a div next to it (.mainContent) that I would like to (padding aside!) fill the rest of the screen.
Unfortunately there are around 798 randomly placed divs, spans and whatever else in the code too that I can't seem to strip without breaking the site, so any advice on exactly how to achieve this would be much appreciated, thank you!
Basically I have a side navigation (.menu-vertical) that is 230px
wide, and a div next to it (.mainContent) that I would like to
(padding aside!) fill the rest of the screen.
..
the basis of the site is in place with a .container div, and the
.menu-vertical (fixed) and .mainContent (fluid, 100%) divs inside.
From what I understand, you're looking for this: http://jsfiddle.net/thirtydot/wv42t/
CSS:
.container {
border: 3px solid #666;
overflow: hidden
}
.menu-vertical {
width: 230px;
float: left;
padding: 10px;
border: 2px solid #f0f
}
.mainContent {
overflow: hidden;
padding: 30px;
border: 2px solid #00f
}
HTML:
<div class="container">
<div class="menu-vertical">menu-vertical</div>
<div class="mainContent">mainContent</div>
</div>
I'm trying to build a profile page for a network...similar to Facebook profile page. I need the background the tabs are on to go under the profile photo on the left...so when the user updates their status it grows vertically underneath the photo..take a look at Facebook profile page. I've tried placing the status at the top "topStatus" with position: absolute; top: -51px; on the left column "profile_leftside" which works but when more apps are added to the left side it displays past the bottom border..doesn't stay contained in "pageContent".
Basically here's my layout...
<div id="pageContent">
<div id="topStatus">
<div id="innerStatus">
*STATUS AND TABS HERE // EXPANDS VERTICALLY WHEN STATUS IS UPDATED*
</div>
</div>
<div id="profileContent">
<div id="profile_leftside">
*LEFT SIDE APPS*
</div>
<div id="profile_rightside">
*TAB CONTENT*
</div>
</div>
</div>
CSS
#pageContent {
width: 799px;
min-height:600px;
text-align: left;
margin-left: auto;
margin-right: auto;
float:left;
border-left:1px solid #b3b3b3;
border-right:1px solid #b3b3b3;
border-bottom:1px solid #b3b3b3;
}
#topStatus {
background: #f7f7f7;
border-bottom:1px solid #DDDDDD;
width: 100%;
}
#innerStatus {
padding: 10px 10px 0px 225px;
}
#profileContent {
padding: 8px 0px 8px 10px;
}
#profile_leftside {
float: left;
width: 200px;
position: absolute;
top: 51px;
}
#profile_rightside {
float: right;
width: 580px;
}
Just trying to get "profile_leftside" at the top left without breaking the content at the bottom. Maybe theres a better way to lay this out?
Thanks!
I've always found CSS frameworks to be very helpful. Many of them have been proven again and again, and it takes abstracts you up a layer above having to worry about specific CSS layout problems.
I've used Blueprint CSS for many things, but have also heard good things of the 960 Grid system.
Blueprint CSS: http://www.blueprintcss.org/
960 Grid System: http://960.gs/
Regards,
Chris
It's easier to add any CSS problems to JSFIDDLE.NET so other people can look at the problem directly. I've added it for you and come up with a solution that I think you were looking for: http://jsfiddle.net/SqxN7/12/
The top bar now expands with the left Apps. I had to reorganize the placement of the div's and add 'overflow: auto' to the top status bar to allow it to expand as the app bar is a float.