This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 12 months ago.
I want to make navbar full width of the screen but for some reason, it's full width only on the right side.
Left side of the navbar is not full width. Can someone please tell me how can I do it?
CSS code looks like that:
.head{
background-color:rgb(48, 87, 56);
box-shadow: 1px 1px 10px 3px rgb(155, 153, 153);
margin-top: -2%;
position: fixed;
width:100%;
}
According to this MDN documentation, try to add
left: 0;
in your css file to close the gap on the left side.
I'm not sure, I should see your code, but try it :
reset your body
*{
margin:0px;
padding:0px;
}
Maybe this can help:
* {
margin:0;
padding:0;
}
.navbar {
padding: 6px 8px;
display:flex;
justify-content:flex-start;
align-items:center;
background-color:rgb(48, 87, 56);
box-shadow: 1px 1px 10px 3px rgb(155, 153, 153);
position: fixed;
width:100%;
}
.logo {
width:20px;
height:20px;
}
<div class="navbar">
<img alt="" src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" class="logo" />
</div>
Related
I just wanted to ask if there is a certain type of code that may give me double or triple lines in one code or would I have to create a separate code for each line.
This is what I would like to have.
I'm not certain that this is possible with CSS alone, but you could use two or three nested block elements, e.g. <div>s, with a small amount of padding between each. For example:
.multi-border {
border: 1px solid black;
padding: 5px;
}
<div class="multi-border">
<div class="multi-border">
<div class="multi-border">
I am some example text!
</div>
</div>
</div>
Well you can do some styling with borders. Check this out
CSS Border Style
There is a solution on the web for this. It looks like the action is here, but I will link to the source below.
.underline--double {
box-shadow:
inset 0 -0.075em white,
inset 0 -0.1em red,
inset 0 -0.15em white,
inset 0 -0.175em red;
}
Source
You can use before and after for a class. By this you get maximum 3 border for a single class.
<div class="border">
This is the code
</div>
.border {
position:relative;
border:5px solid #000;
height:210px;
width:210px;
background: #f8f8f8;
padding:30px;
border-radius: 9px;
}
.border:before {
content:"";
position: absolute;
top:5px;
bottom:5px;
left:5px;
right:5px;
border:5px solid #999;
border-radius: 8px;
}
.border:after {
content:"";
position: absolute;
top:15px;
bottom:15px;
left:15px;
right:15px;
border:5px solid #666;
border-radius: 8px;
}
I am trying to make the in my website always fit in the browser size. Right now, if I go to my website with a smaller screen, everything is messing together. Here is one and css example in my codes
html
<div class="contactus">
<h2>Contact Us</h2>
<h3>PhoneNumber</h3>
<h3>812-123-4567</h3>
<h3>Email</h3>
<h3>qwerty#asd.com</h3>
</div>
CSS
div.contactus {
position:absolute;
right:20px;
top:150px;
border: 2px solid;
border-color:#333;
width:100px;
font:20px;
In order to make it responsive you need to keep the code of the CSS in relative units because whey you make it with fixed units the code will not adapt to the screen so you will have to make your code something like this:
div.contactus {
position:absolute;
right:5%;
top:25%;
border: 2px solid;
border-color:#333;
width:100%;
font:20px;}
If the percentages are not ok just keep playing with them until you like it.
Responsive media queries would be extremely helpful, but the biggest problem I'm seeing is that your container (.contactus) is not wide enough to accommodate the text you're trying to place. Try changing the contactus width to 400px. However, on a smaller screen, you should have a media query that updates font size and container size based on the viewport width.
First of all welcome to our community, first read this topic to help you answers better questions and get more precise response: https://stackoverflow.com/help/how-to-ask
About your question, you have to explain better what you mean with "messing together".
I made a simple fiddle to help you with your responsive issues : https://jsfiddle.net/nLxa1745/
HTML
<div class="main">
<img class="user-pic" src="http://placehold.it/250x150">
<div class="contact-box">
<h4 class="user-name">Contact Us</h4>
<ul class="info-contact">
<li>
phonenumber
</li>
<li>
812-123-4567
</li>
<li>
email
</li>
<li>
qwerty#blabla.com
</li>
</ul>
</div>
</div>
CSS
body {
font-family: sans-serif;
color: #3f3f3f;
}
li{
margin: 5px 0px 0px 20px;
}
.main {
border: 2px solid gray;
width: 250px;
margin: auto;
box-shadow: 2px 2px 5px 1px gray;
}
.user-pic {
border-bottom: 2px solid gray;
}
.user-name {
margin-left: 15px;
margin-bottom: 0;
color: #B77425;
}
.info-contact {
list-style-type: none;
padding: 0;
}
#media only screen
and (min-width : 600px) {
.main {
width: 100%;
height: 150px;
}
.user-pic {
border-right: 2px solid gray;
float: left;
}
.contact-box {
float: left;
}
}
P.S. I'd recommend a reading about headings also https://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824
This question already has answers here:
Transparent arrow/triangle indented over an image
(4 answers)
Closed 8 years ago.
I'm trying to create a hollow css arrow in front of an image.
I got it… but it feels very dirty. Is there any better way to do this?
Cross browser compatibility (IE8+) would be awesome.
SCSS
.arrowwrap {
width:100%;
padding:0;
position:relative;
overflow:hidden;
margin:-$arrow_height 0 0 0;
&:after {
content:'';
position:absolute;
height:$arrow_height;
width:50%;
margin:-$arrow_height 0 0 -$arrow_width;
left:0;
z-index:99999;
background:$box_color;
}
&:before {
content:'';
position:absolute;
height:$arrow_height;
width:100%;
left:50%;
margin:0 0 0 $arrow_width;
z-index:99999;
background:$box_color;
}
.arrowone {
width: 0;
height: 0;
border-style: solid;
border-width: $arrow_height $arrow_width 0 $arrow_width;
/* border-color: transparent transparent #333 transparent; */
border-color:transparent $box_color $box_color $box_color;
margin:auto;
}
}
http://jsfiddle.net/dhs2eba2/
If you want to minimise and remove all unsemantic markup you can do :
DEMO
This technique relies on pseudo elements and therefore prevents the use of unsemantic markup. Pseudo elements are supported by IE8+ see canIuse. It also needs the box-sizing property to enable responsive width (box-sizing: border-box is also supported by IE8+ see canIuse).
HTML :
<div class="wrap">
<img src="http://placekitten.com/800/350" />
<article>
<h1>Hellow World, meow</h1>
</article>
</div>
CSS :
body {
background:#fad;
padding:0;
margin:0;
}
$arrow_width: 20px;
$arrow_height: 20px;
$box_color: #d3d030;
.wrap {
img {
width:100%;
height:auto;
vertical-align:bottom;
}
article{
padding:20px;
background:$box_color;
color:#fff;
position:relative;
}
}
article:before, article:after{
content:'';
position:absolute;
width:50%;
bottom:100%;
box-sizing:border-box;
}
article:before{
left:0;
border-bottom:20px solid #D3D030;
border-right:20px solid transparent;
}
article:after{
right:0;
border-bottom:20px solid #D3D030;
border-left:20px solid transparent;
}
Not sure about IE8, haven't got a copy on my VM, but you could approach it like this instead of pseudo elements
<div class="arrowborder">
<div class="arrrowwrap arrowwrapleft"></div>
<div class="arrrowwrap arrowwrapright"></div>
</div>
.arrrowwrap {
box-sizing:border-box;
width:50%;
z-index:9999999;
float:left;
}
.arrowwrapleft {
border-right: $arrow_width solid transparent;
border-bottom: $arrow_height solid $box_color;
}
.arrowwrapright {
border-left: $arrow_width solid transparent;
border-bottom: $arrow_height solid $box_color;
}
http://jsfiddle.net/dhs2eba2/8/
I wana section box width height according text size. i try with below codes its working but not best width height of section box according to text. I design three css ids 1st is #wbp_row second is #wbp_col and last one is text id name is #threedtext
I try these codes with html5 and css3 techniques.
My css Code:
#wbp_row {
position:relative;
display:table;
border:solid 1px #0F0;
min-width:auto;
max-width:960px;
max-height:auto !important;
margin: 0 auto;
}
#wbp_col {
position:relative;
display:table-row;
width:320px;
min-height:auto!important;
border:1px solid #000;
float:left;
margin:0 0 0 0px;
padding:0;
}
#wbp_row #threedtext {
font-size:70px;
max-height:auto !important;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
/*text-shadow: 0px 4px 0px rgba(82,82,82,.80),
2px 4px 3px rgba(0, 0, 7, 0.50),
3px 8px 3px rgba(0,0,0,.40),
0px 12px 10px rgba(0,0,0,0.1);*/
color: rgba(141, 198, 63, 1);
padding:0;
line-height:normal;
overflow:auto;
position:relative;
border:1px solid #F00;
}
HTML Codes :
<section id="wbp_row">
<Section id="wbp_col">
<p id="threedtext">Web</p>
</Section><!--Cols codes end-->
<Section id="wbp_col">
<p id="threedtext">Brand</p>
</Section><!--Cols codes end-->
<Section id="wbp_col">
<p id="threedtext">Print</p>
</Section><!--Cols codes end-->
</section><!--row code end-->
If you set width:auto in "#wbp_col" like this
#wbp_col{width: auto;}
So section is adjust its height and width according to text size.
This is my first post. I'm still learning CSS and your help is much appreciated.
I have been trying to create a Div that contains an image with a transparent overlay with a semi transparent border at the bottom. On hover, a second transparent overlay is added making the bottom border darker. I then have another div containing some title text, the title text should change colour on hover anywhere in the parent Div as well as the whole thing be linked on click.
The closest thing to it is on Vimeo here:
http://vimeo.com/categories
I have managed to achieve all of this and it has been working fine in IE and Firefox and safari etc. But with IE10 the text no longer changes colour on hover nor is the div clickable.
Here's my CSS:
.videoCatThumbImg {
position:relative;
background:#FFFFFF;
width: 178px;
height: 178px;
padding: 5px 5px 5px 5px;
margin: 10px 0px 0px 0px;
border: 1px solid #CCCCCC;
line-height:normal;
float:left;
}
.videoCatTskin {
position: absolute; top: 5px; left: 5px;
}
.videoCatThumbHover {
position: absolute; top: 5px; left: 5px; display: none;
}
.videoCatThumbImg:hover .videoCatThumbHover{
display: block;
}
.videoCatTitle {
position:absolute;
top:5px; left:5px;
display:block;
width:173px;
height:26px;
padding:152px 0px 0px 5px;
Font-size:18px;
font-weight:bold;
color: #ffffff;
}
.videoCatTitle:hover {
color: #5798ca;
}
and here's my HTML:
<div class="videoCatThumbImg">
<img src="http://www.mydomain.com/images/vcat/image_thumb.gif" alt=""/>
<img class="videoCatTskin" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<img class="videoCatThumbHover" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<div class="videoCatTitle">Some Text Here</div>
</div>
Any advice on what I'm doing wrong is very welcome.
Similar to this answer, try adding a background (transparent image or same-color will work), to the hover classes that don't have it (.videoCatThumbImg:hover).
Just had the problem. None of the solutions were working (border, background, hasLayout).
In the end, I switched to XHTML 1 Strict doctype and it worked, if it can help...